@extends('layouts.app')

@section('title', 'Request Master')

@section('content')

<div class="container mt-3">
    <!-- Button Container -->
    <div class="row mb-3">
        <div class="col-md-12 d-flex justify-content-end">
            <button type="button" id="create_request" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addRequestModal">
                Add New Request
            </button>
        </div>
    </div>

    <!-- Add Request Modal -->
    <div class="modal fade" id="addRequestModal" tabindex="-1" aria-labelledby="addRequestModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addRequestModalLabel">Add New Request</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addRequestForm">
                        @csrf
                        <input type="hidden" id="requestId" name="id">

                        <div class="row mb-3">
                            <div class="col-md-12">
                            <label for="company" class="form-label">Company</label>
                            <select id="company" name="company" class="form-select" required>
                                <option value=""  selected>Select company</option>
                              
                                <!-- Populate this with countries dynamically if needed -->
                            </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label for="userSelection" class="form-label">User Selection</label>
                                <select class="form-select" id="userSelection" name="user_id" required>
                                    <option value="">Select User</option>
                                    <!-- Populate user options dynamically -->
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label for="requestDescription" class="form-label">Request Description</label>
                                <textarea class="form-control" id="requestDescription" name="description" rows="3" placeholder="Enter Request Description" required></textarea>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label for="requestStatus" class="form-label">Status</label>
                                <select class="form-select" id="requestStatus" name="status" required>
                                    <option value="3" selected>Pending</option>
                                    <option value="1">Approved</option>
                                </select>
                            </div>
                        </div>

                        <div id="approvalFields" style="display: none;">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="startDateTime" class="form-label">Start Date & Time</label>
                                    <input type="datetime-local" class="form-control" id="startDateTime" name="start_datetime">
                                </div>
                                <div class="col-md-6">
                                    <label for="endDateTime" class="form-label">End Date & Time</label>
                                    <input type="datetime-local" class="form-control" id="endDateTime" name="end_datetime">
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Options:</label>

                                <!-- First Row: 2 Checkboxes -->
                                <div class="row mb-2">
                                    <div class="col pe-0">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isWatermark" id="isWatermark">
                                            <label class="form-check-label" for="isWatermark">
                                                Is Watermark
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isCaptureImage" id="isCaptureImage">
                                            <label class="form-check-label" for="isCaptureImage">
                                                Is Capture Image
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Second Row: 2 Checkboxes -->
                                <div class="row mb-2">
                                    <div class="col pe-0">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isCaptureVideo" id="isCaptureVideo">
                                            <label class="form-check-label" for="isCaptureVideo">
                                                Is Capture Video
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isLightOne" id="isLightOne">
                                            <label class="form-check-label" for="isLightOne">
                                                Is Light One
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Third Row: 2 Checkboxes -->
                                <div class="row mb-2">
                                    <div class="col pe-0">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isLightTwo" id="isLightTwo">
                                            <label class="form-check-label" for="isLightTwo">
                                                Is Light Two
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isLightThree" id="isLightThree">
                                            <label class="form-check-label" for="isLightThree">
                                                Is Light Three
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Fourth Row: 2 Checkboxes -->
                                <div class="row mb-2">
                                    <div class="col pe-0">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isRotateClockwiseStep1" id="isRotateClockwiseStep1">
                                            <label class="form-check-label" for="isRotateClockwiseStep1">
                                                Is Rotate Clockwise Step 1
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isRotateAntiClockwiseStep1" id="isRotateAntiClockwiseStep1">
                                            <label class="form-check-label" for="isRotateAntiClockwiseStep1">
                                                Is Rotate Anti-Clockwise Step 1
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Fifth Row: 2 Checkboxes -->
                                <div class="row mb-2">
                                    <div class="col pe-0">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isRotateClockwise360" id="isRotateClockwise360">
                                            <label class="form-check-label" for="isRotateClockwise360">
                                                Is Rotate Clockwise 360 Degree
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="isRotateAntiClockwise360" id="isRotateAntiClockwise360">
                                            <label class="form-check-label" for="isRotateAntiClockwise360">
                                                Is Rotate Anti-Clockwise 360 Degree
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3 justify-content-end">
                            <div class="col-auto pe-0">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            </div>
                            <div class="col-auto">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



    <!-- Existing DataTable code -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="datatable" class="table table-striped dt-responsive nowrap w-100">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>User</th>
                                <th>Description</th>
                                <th>Start Date & Time</th>
                                <th>End Date & Time</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- DataTables will populate this -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- CSRF Token Meta Tag -->
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('scripts')
    <script>
        $(document).ready(function () {

            var requestListAjax = '{{ route("request.list.ajax") }}';
            var searchAllUser = '{{ route("search.all.user") }}';
            var searchRequestsStatus = '{{ route("search.requests.status") }}';
            var addRequestAjax = '{{ route("add.request.ajax") }}';
            var requestGet = '{{ route("request.get") }}';
            var requestDelete = '{{ route("request.delete") }}';
            var searchCompanylist = '{{route("search.companylist")}}';

            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            let viewAllClicked = false;
  
            $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: requestListAjax,
                    type: "POST",
                    data: function(d) {
                        d._token = csrfToken; // Include CSRF token
                    }
                },
                columns: [
                    { data: "id" },                 // ID column
                    { data: "user" },               // User name (transformed in the controller)
                    { data: "description" },        // Request description
                    { data: "start_datetime" },         // Start date
                    { data: "end_datetime" },           // End time
                    { data: "status" },             // Status (1, 2, 3)
                    { data: "action","orderable":false,"searchable":false }              // Action buttons (edit/delete)
                ],
                "initComplete": function() {
                    const $label = $('#datatable_filter label');
                    const $searchInput = $('#datatable_filter input');

                    // Remove the text node "Search:"
                    $label.contents().filter(function() {
                        return this.nodeType === 3;
                    }).remove();

                    $searchInput
                        .addClass('form-control search-input')
                        .attr('placeholder', 'Search menu...');

                    $searchInput.wrap('<div class="position-relative"></div>');
                    $searchInput.after('<i class="bx bx-search-alt search-icon"></i>');
                },
                "drawCallback": function() {
                const $info = $('#datatable_info');
                 $('#viewAllLink').remove();

                 const linkHtml = ` &nbsp;|&nbsp; <a href="javascript:void(0);" id="viewAllLink">
                        ${viewAllClicked ? 'Show Less <i class="fas fa-chevron-up"></i>' : 'View All <i class="fas fa-chevron-right"></i>'}
                    </a>`;

                    $info.append(linkHtml);

                $('#viewAllLink').off('click').on('click', function () {
                    const table = $('#datatable').DataTable();

                    viewAllClicked = !viewAllClicked;

                    usersPageLength = viewAllClicked ? -1 : 10;

                    table.page.len(usersPageLength).draw(false);  // false = stay on current page
                });
            },
                order: [[0, 'asc']], // Default ordering by ID
                language: {
                    // Customize language options if needed
                }
            });

            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            const $statusSelect = $('#requestStatus');
            const $approvalFields = $('#approvalFields');

            // Function to toggle approval fields based on status
            function toggleApprovalFields() {
                if ($statusSelect.val() === '1') { // "Approve"
                    $approvalFields.show();
                } else {
                    $approvalFields.hide();
                }
            }

            $statusSelect.on('change', toggleApprovalFields);

            // Initial check on modal open
            toggleApprovalFields();

            $("#userSelection").select2({
                ajax: {
                    url: searchAllUser,
                    dataType: 'json',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    data: function(params) {
                        return {
                            q: params.term || '',
                            page: params.page || 1,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;

                        return {
                            results: data.results,
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count // Adjust based on your pagination logic
                            }
                        };
                    },
                },
                placeholder: 'Search for User',
                dropdownParent: $("#addRequestModal .modal-body")
            });
            $("#requestStatus").select2({
                ajax: {
                    url: searchRequestsStatus,
                    dataType: 'json',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    data: function(params) {
                        return {
                            q: params.term || '',
                            page: params.page || 1,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;

                        return {
                            results: data,
                            pagination: {
                                more: (params.page * 10) < data.total_count // Adjust based on your pagination logic
                            }
                        };
                    },
                },
                placeholder: 'Search for Request Status',
                dropdownParent: $("#addRequestModal .modal-body")
            });
            $('#addRequestForm').on('submit', function(event) {
                event.preventDefault();
                $('#addRequestForm button[type="submit"]').prop('disabled', true);

                // Validate form fields
                if (!this.checkValidity()) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Form Invalid',
                        text: 'Please fill in all required fields.',
                    });
                    $('#addRequestForm button[type="submit"]').prop('disabled', false);
                    return;
                }

                let formData = new FormData(this);
                $('#addRequestForm input[type="checkbox"]').each(function() {
                    formData.append(this.name, this.checked ? 1 : 0);
                });

                $.ajax({
                    url: addRequestAjax, // Adjust route accordingly
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        // $('#preloader').show();
                    },

                    success: function(response) {
                        toastr.success(response.message);
                        $('#addRequestModal').modal('hide');
                        $('#datatable').DataTable().ajax.reload();
                        $('#addRequestForm button[type="submit"]').prop('disabled', false);
                        // $('#preloader').fadeOut(700);
                    },
                    error: function(xhr) {
                        let errorMessage = 'An unexpected error occurred.';

                        if (xhr.responseJSON) {
                            if (xhr.responseJSON.errors) {
                                errorMessage = '';
                                for (const [key, value] of Object.entries(xhr.responseJSON.errors)) {
                                    errorMessage += value.join(', ') + '<br>';
                                }
                            } else if (xhr.responseJSON.message) {
                                errorMessage = xhr.responseJSON.message;
                            }
                        }

                        toastr.error(errorMessage);
                        $('#addRequestForm button[type="submit"]').prop('disabled', false);
                    }
                });
            });

            $(document).on('click', '.edit-btn', function() {
                $('input[type="checkbox"]').prop('checked', false);
                var id = $(this).data('id');
                $.ajax({
                    url: requestGet+'?id='+id,
                    method: 'GET',
                    success: function(response) {
                        let data = response.data;
                        console.log(data);
                        
                        if (data) {
                            $('#addRequestModalLabel').text('Edit Request #' + data.id);
                            $('#requestId').val(data.id);
                            $('#requestDescription').val(data.description);
                            $('#requestStatus').val(data.status);

                            setSelectValue('#requestStatus', data.status, data.status_name);
                            setSelectValue('#userSelection', data.user_id, data.user_name);
                            setSelectValue('#company', data.company_id, data.company_name);

                            //options
                            $('#isWatermark').prop('checked', data.is_watermark == 1);
                            $('#isCaptureImage').prop('checked', data.is_capture_image == 1);
                            $('#isCaptureVideo').prop('checked', data.is_capture_video == 1);
                            $('#isLightOne').prop('checked', data.is_light_one == 1);
                            $('#isLightTwo').prop('checked', data.is_light_two == 1);
                            $('#isLightThree').prop('checked', data.is_light_three == 1);
                            $('#isRotateClockwiseStep1').prop('checked', data.is_rotate_clockwise_step1 == 1);
                            $('#isRotateAntiClockwiseStep1').prop('checked', data.is_rotate_anty_clockwise_step1 == 1);
                            $('#isRotateClockwise360').prop('checked', data.is_rotate_clockwise_360_degree == 1);
                            $('#isRotateAntiClockwise360').prop('checked', data.is_rotate_anty_clockwise_360_degree == 1);



                            if (data.status == 1) {
                                // Set combined datetime fields directly
                                $('#startDateTime').val(data.start_datetime);
                                $('#endDateTime').val(data.end_datetime);
                            } else {
                                // Clear datetime fields if status is not 1
                                $('#startDateTime').val('');
                                $('#endDateTime').val('');
                            }

                            $('#addRequestModal').modal('show');
                        } else {
                            toastr.error('No data found for this request.');
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error('AJAX error:', textStatus, errorThrown);
                        toastr.error('Failed to load request data: ' + errorThrown);
                    }
                });
            });
            function setSelectValue(selectSelector, id, name) {
                var optionExists = $(selectSelector + ' option[value="' + id + '"]').length > 0;

                if (!optionExists) {
                    var newOption = new Option(name, id, true, true);
                    $(selectSelector).append(newOption);
                }

                $(selectSelector).val(id).trigger('change');
            }

            function resetRequestForm() {
                $('#addRequestModalLabel').text('Add New Request'); // Adjust if you have an edit modal
                $('#requestId').val(''); // Assuming this is the ID field
                $('#requestDescription').val(''); // Assuming this is the description field
                $('#startDateTime').val('');
                $('#endDateTime').val('');
                setSelectValue('#requestStatus', 3, 'Pending');
                $('input[type="checkbox"]').prop('checked', true);
                $('#userSelection').val('').trigger('change'); // Resetting user selection

            }

            $('#create_request').on('click', function() {
                resetRequestForm();
            });
            $('#requestStatus').on('change', function() {
                $('#startDateTime').val('');
                $('#endDateTime').val('');
            });

            $(document).on('click', '.delete-btn', function(e) {
                e.preventDefault();

                var id = $(this).data('id');

                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: requestDelete+'?id='+id, // Adjust URL for requests
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': csrfToken // Make sure csrfToken is defined
                            },
                            success: function(data) {
                                if (data.message) {
                                    Swal.fire('Deleted!', data.message, 'success');
                                    $('#datatable').DataTable().ajax.reload(); // Reload the DataTable
                                } else {
                                    Swal.fire('Error!', 'An unexpected error occurred while deleting the request.', 'error');
                                }
                            },
                            error: function(xhr, status, error) {
                                Swal.fire('Error!', xhr.responseJSON?.message || 'An unexpected error occurred.', 'error');
                            }
                        });
                    }
                });
            });


            $("#company").select2({
         ajax: {
              url: searchCompanylist, // Corrected variable name
              dataType: 'json',
              method: 'POST',
              delay: 0,
              headers: {
                'X-CSRF-TOKEN': csrfToken // Ensure you pass the CSRF token
             },
           data: function(params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function(data, params) {
            params.page = params.page || 1;
            return {
                results: data.results, // Make sure the response contains a results array
                pagination: {
                    more: (params.page * 30) < data.total_count // Pagination logic
                }
            };
        },
        cache: false
    },
       placeholder: 'Search for a company',
       dropdownParent: $("#addRequestModal .modal-body"), // Set the dropdown parent similar to country
    }).on('select2:select', function(e) {
    var selectedCompanyId = e.params.data.id; // Save selected company ID
   });

        });

    </script>
@endsection