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

@php $priorities = ['P0'=>'P0', 'P1'=>'P1', 'P2'=>'P2','P3'=>'P3', 'P4'=>'P4']; @endphp

<div class="page-header">
    <div>
        <h1>Service Requests <small>List & 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>

<div class="content mt-3">
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered data-table" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Sr.</th>
                            <th>Account Name</th>
                            <th>Project Name</th>
                            <th>Site Name</th>
                            <th>Request Code</th>
                            <th>Issue</th>
                            <th>Category</th>
                            <th>Assigned To</th>
                            <th>Aging</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Service Request Images</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <!-- Images will be injected here -->
                    </div>
                </div>
            </div>
        </div>

        <div id="fullImageOverlay" style="
    display:none;
    position: fixed;
    top:0; left:0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.8);
    z-index: 1050;
    justify-content: center;
    align-items: center;
">
            <span id="closeOverlay" style="
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 40px;
      color: white;
      cursor: pointer;
      z-index: 1100;
  ">&times;</span>

            <img id="fullImage" src="" style="
      max-width: 90vw;
      max-height: 90vh;
      border-radius: 8px;
      box-shadow: 0 0 20px black;
  " />
        </div>

    </div>
</div>



@include('view-modals/assign_request')
@include('view-modals/note_request')
@include('view-modals/srequest_invoice_addedit')

@stop

@section('scripting')
<script type="text/javascript">
    $(document).ready(function() {

        $(".standardSelect").selectpicker();


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            scrollX: 8,
            ajax: {
                data: function(d) {
                    d.stage_id = $('#request_stage_id').val();
                    d.priority = $('#priority').val();
                    d.assigned_to = $('#assigned_to').val();
                    d._token = "{{ csrf_token() }}";
                },
                url: "{{ url('getServiceRequestsData') }}",
                type: "GET",
                dataType: 'json',
            },

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'account_name',
                    name: 'account_name'
                },
                {
                    data: 'project_name',
                    name: 'project_name'
                },
                {
                    data: 'site_name',
                    name: 'site_name'
                },
                {
                    data: 'code',
                    name: 'code'
                },
                {
                    data: 'issue',
                    name: 'issue'
                },
                {
                    data: 'category',
                    name: 'category'
                },
                {
                    data: 'assigned_to',
                    name: 'assigned_to',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'aging',
                    name: 'aging'
                },
                {
                    data: 'status',
                    name: 'status.name',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            },
        });

        table.on('draw', function() {
            $('[data-toggle="tooltip"]').tooltip({
                placement: 'top'
            });
        });

        $('#request_stage_id, #priority, #assigned_to').change(function() {
            $(".data-table").DataTable().ajax.reload();
        });

        $('body').on('click', '.assignServiceRequest', function() {
            var request_id = $(this).data('id');
            reset_modal(); // Make sure this function exists and clears the form.

            $.get("{{ url('get_request_details') }}/" + request_id, function(data) {
                $('#ajaxModel').modal('show');
                $('#modelHeading').html("Assign Request");
                $('#srequest_id').val(request_id); // Set the hidden field for srequest_id
                $('#user_id').val(data.assigned_to);
                $('.standardSelect').selectpicker('refresh');
            });
        });


        $('#saveBtn').click(function(e) {
            e.preventDefault();
            $(this).html('Sending..');
            $.ajax({
                data: $('#dataForm').serialize(),
                url: "{{ url('srequests/assign_srequest') }}",
                type: "POST",
                dataType: 'json',
                success: function(data) {
                    $('#dataForm').trigger("reset");
                    $('#ajaxModel').modal('hide');
                    table.draw();
                    swal({
                        title: "Good job!",
                        text: data.message,
                        icon: "success"
                    });
                },
                error: function(data) {
                    if (data.status == 422) {
                        var x = data.responseJSON;
                        $.each(x.errors, function(index, value) {
                            $("#" + index).addClass("is-invalid");
                            $("#" + index + "-error").html(value[0]);
                        });
                    }
                    $('#saveBtn').html('Save Changes');
                }
            });
        });




        $('body').on('click', '.updateProduct', function() {
            var product_id = $(this).data('id');
            reset_modal();
            $.get("{{ url('srequest/update_status') }}/" + product_id, function(data) {
                $('#modelHeading').html("Edit Category");
                $('#saveBtn').val("Save Changes");
                $('#myModel').modal('show');
                $('#noteRequestId').val(data.id); // SET THIS ID HERE!
                $('#status').val(data.status);
                $('#note').val(data.note);
                $('.standardSelect').selectpicker('refresh');
            })
        });


        $('#updateBtn').click(function(e) {
            e.preventDefault();
            $(this).html('Updating..');

            var formData = new FormData($('#updateForm')[0]);
            var id = $('#noteRequestId').val(); // Make sure this is not blank or undefined

            $.ajax({
                url: "{{ route('my_requests.update', ':id') }}".replace(':id', id),
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                },
                success: function(data) {
                    $('#updateForm').trigger("reset");
                    $('#myModel').modal('hide');
                    table.draw();
                    swal({
                        title: "Updated!",
                        text: data.msg,
                        icon: "success",
                    });
                    $('#updateBtn').html('Update Note');
                },
                error: function(data) {
                    if (data.status == 422) {
                        var errors = data.responseJSON.errors;
                        $.each(errors, function(index, value) {
                            $("#" + index).addClass("is-invalid");
                            $("#" + index + "-error").html(value[0]);
                        });
                    }
                    $('#updateBtn').html('Update Note');
                }
            });
        });

        $(document).on('click', '.view-attachment', function() {
            let attachments = $(this).attr('data-attachment');

            // Clear modal body
            $('#imagePreviewModal .modal-body').empty();

            try {
                let files = JSON.parse(attachments);

                files.forEach(filename => {
                    const url = `/storage/${filename}`;
                    const ext = filename.split('.').pop().toLowerCase();


                    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) {
                        $('#imagePreviewModal .modal-body').append(`
                    <img src="${url}" class="img-fluid mb-3 clickable-image" style="max-height:300px; cursor:pointer;" data-full="${url}">
                `);
                    } else if (ext === 'pdf') {
                        $('#imagePreviewModal .modal-body').append(`
                    <iframe src="${url}" style="width:100%; height:400px;" frameborder="0"></iframe>
                `);
                    } else {
                        $('#imagePreviewModal .modal-body').append(`<p>Unsupported file type: ${filename}</p>`);
                    }
                });

                $('#imagePreviewModal').modal('show');
            } catch (e) {
                $('#imagePreviewModal .modal-body').html('<p class="text-danger">Failed to load images.</p>');
                $('#imagePreviewModal').modal('show');
            }
        });

        // Show full image overlay on thumbnail click
        $(document).on('click', '.clickable-image', function() {
            let src = $(this).data('full');
            $('#fullImage').attr('src', src);
            $('#fullImageOverlay').css('display', 'flex');
        });

        // Close overlay on X or outside click
        $('#closeOverlay').on('click', () => $('#fullImageOverlay').hide());
        $('#fullImageOverlay').on('click', e => {
            if (e.target.id === 'fullImageOverlay') {
                $('#fullImageOverlay').hide();
            }
        });



        $(document).on('click', '.generate-invoice-btn', function() {
            let id = $(this).data('id');

            $('#srequest_id').val(id);

            $('#invoice_amount').val('');

            $('#invoiceModal').modal('show');
        });
        $(document).on('click', '.generate-invoice-btn', function() {
            let id = $(this).data('id');
            console.log('Clicked srequest_id:', id);
            $('#srequest_id').val(id);
            $('#invoice_amount').val('');
            $('#invoiceModal').modal('show');
        });

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

            console.log('Submitting srequest_id:', $('#srequest_id').val());
            console.log('Submitting amount:', $('#invoice_amount').val());

            let form = $(this);
            let url = "{{ url('srequest/generate-invoice') }}";

            $.ajax({
                url: url,
                method: 'POST',
                data: {
                    srequest_id: $('#srequest_id').val(),
                    amount: $('#invoice_amount').val(),
                    _token: $('input[name="_token"]').val()
                },
                success: function(data) {
                    $('#invoiceGenerateForm')[0].reset();
                    $('#invoiceModal').modal('hide');
                    swal("Success!", data.msg || "Invoice generated successfully!", "success");
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        $.each(errors, function(key, val) {
                            let el = $('#' + key);
                            el.addClass('is-invalid');
                        });
                    } else {
                        swal("Error", xhr.responseJSON.message || "Something went wrong.", "error");
                    }
                }
            });

        });


    });


    function reset_modal() {
        // Reset field values
        $("#category").val("");
        $("#issue").val("");
        $("#priority").val("");
        $("#status").val("");

        // Reset select pickers (if used)
        $('.standardSelect').selectpicker('refresh');

        // Remove error styles
        $("#category, #issue, #priority, #status").removeClass("is-invalid");

        // Clear error messages
        $("#category-error, #issue-error, #priority-error, #status-error").html("");

        // Reset button text
        $('#saveBtn').html('Save Changes');
    }
</script>
@endsection