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

<div class="page-header">
    <div>
        <h1>Resolve Request <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 class="float-end">

    </div>
</div>

<div class="content mt-3">
    <div class="card shadow mb-4">
        <div class="card-header">
            <strong>Requests List</strong>
        </div>

        <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>User</th>
                            <th>Site name</th>
                            <th>Date of Expense</th>
                            <th>Category</th>
                            <th>Amount</th>
                            <th>Payment Method</th>
                            <th>Moved to Expanse</th>
                            <th>Expanse Ref No</th>
                            <th>Approved By</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="modal fade" id="attachmentModal" tabindex="-1" aria-labelledby="attachmentModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Attachment Preview</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body text-center">
                    </div>
                </div>
            </div>
        </div>

        <!-- Full-page image overlay -->
        <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/reimRes_request')

@stop

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

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

        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            scrollX:true,
            ajax: {
                data: function(d) {
                    d._token = "{{ csrf_token() }}";
                },
                url: "{{ url('getReimRequestData') }}",
                type: "GET",
                dataType: 'json',
            },

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'user_id',
                    name: 'user_id'
                },
                {
                    data: 'site_name',
                    name: 'site_name'
                },
                {
                    data: 'date_of_expense',
                    name: 'date_of_expense'
                },
                {
                    data: 'category',
                    name: 'category'
                },
                {
                    data: 'amount',
                    name: 'amount'
                },
                {
                    data: 'payment_method',
                    name: 'payment_method'
                },

                {
                    data: 'is_moved_to_expanse',
                    name: 'is_moved_to_expanse'

                },

                {
                    data: 'expanse_ref_no',
                    name: 'expanse_ref_no'
                },
                {
                    data: 'approved_by_name',
                    name: 'approved_by_name'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ],

            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            },
        });


        $('body').on('click', '.updateProduct', function() {
            var product_id = $(this).data('id');
            reset_modal();

            $.get("{{ url('reimbursement/edit') }}" + '/' + product_id, function(data) {
                $('#modelHeading').html("Edit Request");
                $('#saveBtn').val("Save Changes");
                $('#ajaxModel').modal('show');

                $('#srequest_id').val(product_id);
                $('#user_id').val(data.user_id);
                $('#site_id').val(data.site_id);
                $('#amount').val(data.amount);
                $('#is_moved_to_expanse').val(data.is_moved_to_expanse);
                $('#expanse_ref_no').val(data.expanse_ref_no);
                $('#status').val(data.status);

                // Convert category JSON (or comma string) to displayable text
                let categoryText = '';

                // Try parsing JSON, fall back to comma-separated string
                try {
                    const parsed = JSON.parse(data.category);
                    categoryText = parsed.join(', ');
                } catch (e) {
                    categoryText = data.category; // Already a string
                }

                $('#viewCategoryBox').text(categoryText || '—');


                $('#viewCategory').text(categoryList.join(', ')); // Show in read-only view

                $('.standardSelect').selectpicker('refresh');
            });
        });




        $('#saveBtn').click(function(e) {
            e.preventDefault();
            let id = $('#srequest_id').val();
            console.log("ID to update:", id);

            $.ajax({
                url: "{{ url('reimbursement/update-status') }}/" + id,
                type: 'POST',
                data: {
                    _token: $('input[name=_token]').val(),
                    status: $('#status').val(),
                    is_moved_to_expanse: $('#is_moved_to_expanse').is(':checked') ? 1 : 0,
                    expanse_ref_no: $('#expanse_ref_no').val(),
                },
                success: function(data) {
                    $('#dataForm').trigger("reset");
                    $('#ajaxModel').modal('hide');
                    $('.data-table').DataTable().ajax.reload();
                    swal({
                        title: "Success!",
                        text: data.msg,
                        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');
                }
            });
        });


        // $(document).on('click', '.pay-now', function() {
        //     var reimbursementId = $(this).data('id');

        //     swal({
        //         title: "Confirm Payment",
        //         text: "Are you sure you want to mark this reimbursement as paid?",
        //         icon: "warning",
        //         buttons: {
        //             cancel: true,
        //             confirm: {
        //                 text: "Pay Now",
        //                 closeModal: false
        //             }
        //         }
        //     }).then((willPay) => {
        //         if (willPay) {
        //             $.ajax({
        //                 url: '/reimbursements/pay',
        //                 method: 'POST',
        //                 data: {
        //                     id: reimbursementId,
        //                     _token: $('meta[name="csrf-token"]').attr('content')
        //                 },
        //                 success: function(response) {
        //                     swal("Success", "Reimbursement marked as Paid", "success");
        //                     $('#dataTable').DataTable().ajax.reload();
        //                 },
        //                 error: function() {
        //                     swal("Error", "Something went wrong", "error");
        //                 }
        //             });
        //         }
        //     });
        // });


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

            // Clear previous previews
            $('#attachmentModal .modal-body').html('');

            // Loop through each file and preview
            attachments.forEach(filename => {
                const url = `/storage/reimbursements/${filename}`;
                const extension = filename.split('.').pop().toLowerCase();

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

            // Show the modal
            $('#attachmentModal').modal('show');
        });

        // 2. Handle clicking on the thumbnails (clickable-image) outside the above handler
        $(document).on('click', '.clickable-image', function() {
            let src = $(this).data('full');
            $('#fullImage').attr('src', src);
            $('#fullImageOverlay').css('display', 'flex'); // Show overlay
        });

        // 3. Close overlay on clicking X
        $('#closeOverlay').on('click', function() {
            $('#fullImageOverlay').hide();
        });

        // 4. Close overlay on clicking outside the image
        $('#fullImageOverlay').on('click', function(e) {
            if (e.target.id === 'fullImageOverlay') {
                $(this).hide();
            }
        });




    });








    function reset_modal() {
        $("#cat_id").val("");
        $("#name").val("");
        $('#status').val("");
        $('.standardSelect').selectpicker('refresh');
        $("#name, #country_id_fk, #status").removeClass("is-invalid");
        $("#name-error, #country_id_fk-error, #status-error").html("");
        $('#saveBtn').html('Save Changes');
    }
</script>
@endsection