@extends('layouts.app')
@section('content')


<div class="page-header">
    <div>
        <h1>Work Order <small>Details & Management</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </div>

    <div class="float-end">
        <a class="btn btn-primary float-right" href="{{url('work_orders')}}"> <i class="fa fa-bars"></i> Work Orders List</a>
    </div>

</div>



<div class="content mt-3">

    <div class="card shadow mb-4">

        <div class="card-body">

            <div class="row">

                <div class="col-sm-8 side-content">

                    <div class="card mt-3">
                        <div class="card-body">

                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <h4 class="card-title"> Details: </h4>
                                </div>
                                <div class="ml-auto">
                                    <span class="badge bg-primary text-end"> {{ $work_order->status }} </span>
                                </div>
                            </div>


                            <p>Title: {{ $work_order->title }}</p>
                            <p>Description: {{ $work_order->description }}</p>

                            <hr>
                            <h6>Site Details</h6>
                            @if($work_order->site)
                            <p class="mb-0">{{ $work_order->site->site_name }}</p>
                            <p>{{ $work_order->site->address, $work_order->site->city  }}</p>
                            @endif

                            @if($work_order->milestone)
                            <h6>Milestone:</h6>
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <h6 class="card-title"> {{ $work_order->milestone->milestone }}</h6>
                                </div>
                                <div class="ml-auto">
                                    <span class="badge bg-primary text-end"> {{ $work_order->milestone->phase }} </span>
                                </div>
                            </div>
                            @endif

                            @if($work_order->service_request)
                            <div class="d-flex mt-3">
                                <div class="flex-grow-1">
                                    <h6>Service Request: </h6>
                                </div>
                                <div class="ml-auto">
                                    <span class="badge bg-success text-end"> {{ $work_order->service_request->code }}</span>
                                </div>
                            </div>

                            <p>Issue: {{ $work_order->service_request->issue }}</p>
                            <p>Category: {{ $work_order->service_request->category }}</p>
                            <p>Notes: {{ $work_order->service_request->note }}</p>
                            @endif
                        </div>




                    </div>


                    <div class="row">

                        <div class="col-lg-6">
                            <div class="card mt-3">
                                <div class="card-body">
                                    <p>Type: <span class="float-end">{{ $work_order->type }}</span></p>
                                    <p>PO Number: <span class="float-end">{{ $work_order->po_number }}</span></p>
                                    <p>Priority: <span class="float-end badge badge-success">{{ $work_order->priority }}</span></p>
                                    <hr>
                                    <p>Assigned to: <span class="float-end badge badge-success">{{ $work_order->user->name }}</span></p>
                                    <p>Assigned at: <span class="float-end badge badge-success">{{ date('d M, Y h:i A', strtotime($work_order->assigned_at)) }}</span></p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="card mt-3">
                                <div class="card-body">
                                    <p>Task Started at: <span class="float-end badge badge-success">{{ date('d M, Y h:i A', strtotime($work_order->start_time)) }}</span></p>
                                    <p>Task Ends at: <span class="float-end badge badge-success">{{ date('d M, Y h:i A', strtotime($work_order->end_time)) }}</span></p>
                                    <hr>
                                    @php
                                    $datetime1 = new DateTime($work_order->start_time);
                                    $datetime2 = new DateTime($work_order->end_time);

                                    $interval = $datetime1->diff($datetime2);
                                    @endphp
                                    <p>Total Time Taken: <span class="float-end badge badge-success">{{ $interval->format('%d days %h hours %i minutes %s seconds') }}</span></p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>





                <div class="col-sm-4">
                    <div class="card mt-3">
                        <div class="card-header">Mark Comments: </div>
                        <div class="card-body">

                            {{ Form::open(['url' => 'work_order/comment/store']) }}
                            @csrf
                            {{ Form::hidden('work_order_id', $work_order->id) }}
                            <div class="form-group">
                                {{ Form::textarea('comment', '', ['class' => 'form-control', 'required' => '', 'placeholder' => 'Leave Your Comment', 'rows' => 3]) }}
                            </div>

                            {{ Form::submit('Submit', ['class' => 'btn btn-dark']) }}
                            {{ Form::close() }}

                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">Comments Details: </div>
                        <div class="card-body">

                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>


</div>

@stop



@section('scripting')

<script>
    $(document).ready(function() {
        console.log("Kwh working ");
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Submit form using AJAX
        $('#kwhForm').on('submit', function(e) {
            e.preventDefault();

            let form = this;
            let formData = new FormData(form);

            $('#saveBtn').prop('disabled', true).text('Submitting...');

            $.ajax({
                url: "{{ route('customerRequest.store') }}",
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,

                success: function(response) {
                    // Reset form and close modal
                    $(form).trigger("reset");
                    $('#kwhModal').modal('hide');
                    $('#saveBtn').prop('disabled', false).text('Submit');

                    // Success message
                    swal({
                        title: "Success!",
                        text: response.msg,
                        icon: "success"
                    }).then(() => {
                        window.location.href = "{{ url('/home') }}";
                    });
                },

                error: function(xhr) {
                    $('#saveBtn').prop('disabled', false).text('Submit');

                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        $('.text-danger').html(''); // Clear previous errors
                        $.each(errors, function(key, value) {
                            $('#' + key + '-error').text(value[0]);
                            $('#' + key).addClass('is-invalid');
                        });
                    } else {
                        alert('An unexpected error occurred.');
                    }
                }
            });
        });


        // Submit form using AJAX
        $('#surveyForm').on('submit', function(e) {
            e.preventDefault();

            let form = this;
            let formData = new FormData(form);

            $('#saveBtn').prop('disabled', true).text('Submitting...');

            $.ajax({
                url: "{{ route('customerRequest.store') }}",
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,

                success: function(response) {
                    // Reset form and close modal
                    $(form).trigger("reset");
                    $('#siteSurveyModal').modal('hide');

                    $('#saveBtn').prop('disabled', false).text('Submit');

                    // Success message
                    swal({
                        title: "Success!",
                        text: response.msg,
                        icon: "success"
                    }).then(() => {
                        window.location.href = "{{ url('/home') }}";
                    });
                },

                error: function(xhr) {
                    $('#saveBtn').prop('disabled', false).text('Submit');

                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        $('.text-danger').html(''); // Clear previous errors
                        $.each(errors, function(key, value) {
                            $('#' + key + '-error').text(value[0]);
                            $('#' + key).addClass('is-invalid');
                        });
                    } else {
                        alert('An unexpected error occurred.');
                    }
                }
            });
        });



        $('#meterForm').submit(function(e) {
            e.preventDefault();

            var form = this;
            var formData = new FormData(form);

            // Optional: disable submit button to prevent multiple submits
            $('#saveBtn').prop('disabled', true).html('Submitting...');

            $.ajax({
                url: "{{ url('meter-unit/store') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,

                success: function(response) {
                    $(form).trigger('reset');
                    $('#meterUnitsModal').modal('hide');
                    swal({
                        title: "Success!",
                        text: response.msg || "Meter readings submitted successfully.",
                        icon: "success",
                    }).then(() => {
                        window.location.href = "{{ url('/home') }}";
                    });

                    $('#saveBtn').prop('disabled', false).html('Submit');
                },

                error: function(xhr) {
                    if (xhr.status === 422) {
                        var errors = xhr.responseJSON.errors;
                        $('.form-control').removeClass('is-invalid');
                        $('.text-danger').html('');

                        $.each(errors, function(field, messages) {
                            var id = field.replace(/\./g, '_');
                            $('#' + id).addClass('is-invalid');
                            $('#' + id + '-error').html(messages[0]);
                        });
                    } else {
                        swal("Error!", "Something went wrong. Please try again.", "error");
                    }
                    $('#saveBtn').prop('disabled', false).html('Submit');
                }
            });
        });



        $('#load_used').on('submit', function(e) {
            e.preventDefault();

            let form = this;
            let formData = new FormData(form);

            $('#saveBtn').prop('disabled', true).html('Submitting...');

            $.ajax({
                url: $(form).attr('action'),
                method: 'POST',
                data: formData,
                contentType: false,
                processData: false,

                success: function(response) {
                    $(form).trigger('reset');
                    swal({
                        title: "Success!",
                        text: response.msg || "Load Entry submitted successfully.",
                        icon: "success",
                    }).then(() => {
                        window.location.href = "{{ url('/home') }}";
                    });

                    $('#saveBtn').prop('disabled', false).html('Submit Load');
                },

                error: function(xhr) {
                    $('#saveBtn').prop('disabled', false).html('Submit Load');

                    if (xhr.status === 422) {
                        swal("Validation Error", "Please check your inputs.", "error");
                    } else {
                        swal("Error", "An unexpected error occurred.", "error");
                    }
                }
            });
        });
    });
</script>
@endsection