@extends('backend.app')

@section('title', ' List of Order')

@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">

    <style>
        .dataTables_filter {
            display: none !important;
        }
    </style>
@endpush

@section('content')
    <!--begin::Content-->
    <div class="content fs-6 d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Toolbar-->
        <div class="toolbar" id="kt_toolbar">
            <div class=" container-fluid  d-flex flex-stack flex-wrap flex-sm-nowrap">
                <!--begin::Info-->
                <div class="d-flex flex-column align-items-start justify-content-center flex-wrap me-2">
                    <!--begin::Title-->
                    <h1 class="text-dark fw-bold my-1 fs-2">
                        Orders </h1>
                    <!--end::Title-->

                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb fw-semibold fs-base my-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home </a>
                        </li>

                        <li class="breadcrumb-item text-dark">
                            Orders
                        </li>

                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Info-->

            </div>
        </div>
        <!--end::Toolbar-->

        <!--begin::Post-->
        <div class="post fs-6 d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            @include('backend.partials.order.index_main')
            <!--end::Post-->
        </div>
        <!--end::Content-->

        @push('script')
            <script src="{{ asset('backend/assets') . '/js/custom/apps/user-management/users/list/table.js' }}"></script>
            {{-- <script src="{{ asset('backend/assets') . '/js/custom/apps/user-management/users/list/export-users.js' }}"></script>
            <script src="{{ asset('backend/assets') . '/js/custom/apps/user-management/users/list/add.js' }}"></script> --}}
            <script src="{{ asset('backend/assets') . '/js/custom/utilities/modals/users-search.js' }}"></script>

            {{--  Include DataTables --}}
            <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
            <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

            <script>
                $('input[data-kt-order-table-filter="search"]').on('keyup', function() {
                    $('#kt_table_orders').DataTable().search(this.value).draw();
                });

                $(document).ready(function() {
                    $('#kt_table_orders').DataTable({
                        processing: true,
                        serverSide: true,
                        ajax: {
                            url: "{{ route('orders.index') }}",
                            type: "get",
                        },
                        columns: [
                            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                            {
                                data: 'category_name',
                                name: 'category_name'
                            },
                            {
                                data: 'service_name',
                                name: 'service_name'
                            },
                            {
                                data: 'description',
                                name: 'description'
                            },
                            {
                                data: 'budget',
                                name: 'budget'
                            },
                            {
                                data: 'timeline_from',
                                name: 'timeline_from'
                            },
                            {
                                data: 'timeline_to',
                                name: 'timeline_to'
                            },
                            {
                                data: 'final_price',
                                name: 'final_price'
                            },
                            {
                                data: 'attachments',
                                name: 'attachments'
                            },
                            {
                                data: 'create_date',
                                name: 'create_date'
                            },
                            {
                                data: 'customer_name',
                                name: 'customer_name'
                            },
                            {
                                data: 'contractor_name',
                                name: 'contractor_name'
                            },
                            {
                                data: 'status',
                                name: 'status'
                            },
                            {
                                data: 'actions',
                                name: 'actions',
                                orderable: false,
                                searchable: false
                            }
                        ],
                        drawCallback: function() {
                            if (typeof KTMenu !== 'undefined') {
                                KTMenu.createInstances();
                            }
                        }
                    });
                });





                // edit modal show
                $(document).on('click', '.edit-order-btn', function(e) {
                    e.preventDefault();
                    const orderId = $(this).data('id');
                    // console.log(orderId);
                    $.ajax({
                        url: "{{ route('orders.edit', ['order' => '__id__']) }}".replace('__id__', orderId),
                        type: "GET",
                        success: function(response) {
                            // console.log(response);
                            const order = response.order;

                            // Update form action
                            $('#kt_modal_edit_order_form').attr('action', "{{ route('orders.update', ['order' => '__id__']) }}".replace('__id__', orderId));

                            // --- Customer Dropdown ---
                            const $customerSelect = $('#edit_customer');
                            // Add customer as option if not present (e.g. switched profile type)
                            if (order.user && $customerSelect.find('option[value="' + order.user.id + '"]').length === 0) {
                                $customerSelect.append(
                                    $('<option>', {
                                        value: order.user.id,
                                        text: order.user.first_name + ' ' + order.user.last_name + ' (switched profile)'
                                    })
                                );
                            }
                            $customerSelect.val(order.user_id);

                            // --- Contractor Dropdown ---
                            const $contractorSelect = $('#edit_contractor');
                            if (order.accepted && $contractorSelect.find('option[value="' + order.accepted.id + '"]').length === 0) {
                                $contractorSelect.append(
                                    $('<option>', {
                                        value: order.accepted.id,
                                        text: order.accepted.first_name + ' ' + order.accepted.last_name + ' (switched profile)'
                                    })
                                );
                            }
                            $contractorSelect.val(order.accepted_id || '');

            
                            // Populate form fields
                            $('#edit_category').val(response.order.service.category.id);
                            $('#edit_service').val(response.order.service.id);
                            $('#edit_description').val(response.order.description);
                            function toDate(value) {
                                if (!value) return '';
                                return value.split('T')[0];
                            }
                            $('#edit_timeline_from').val(toDate(response.order.timeline_from));
                            $('#edit_timeline_to').val(toDate(response.order.timeline_to));
                            $('#edit_budget').val(response.order.budget);
                            $('#edit_image').val(response.order.attachments);
                            $('#edit_final_price').val(response.order.final_price ? response.order.final_price : '');
                            // $('#edit_customer').val(response.order.user_id);
                            // $('#edit_contractor').val(response.order.accepted_id);
                            $('#edit_completion_request_message').val(response.order.completion_request_message ? response.order.completion_request_message : '');
                            $('#edit_review_request_message').val(response.order.review_request_message ? response.order.review_request_message : '');
                            $('#edit_status').val(response.order.status);
                            // Set attachment preview
                            $('#edit_image_preview').css('background-image', 'url(' + (response.order.attachments ? '/storage/' + response.order.attachments : "{{ asset('backend/assets/media/avatars/300-1.jpg') }}") + ')');
                            // Reset attachment remove input
                            $('input[name="image_remove"]').val('');
                            // Show modal
                            $('#kt_modal_edit_order').modal('show');
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', xhr.responseJSON?.message || 'Failed to fetch order data.', 'error');
                        }
                    });
                });

                // Handle edit form submission
                $('#kt_modal_edit_order_form').on('submit', function(e) {
                    e.preventDefault();
                    const formData = new FormData(this);
                    formData.append('_method', 'PUT'); // Simulate PUT request
                    $.ajax({
                        url: $(this).attr('action'),
                        type: "POST", // Use POST to simulate PUT
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            Swal.fire('Success!', response.message || 'Order updated successfully', 'success');
                            $('#kt_modal_edit_order').modal('hide');
                            $('#kt_table_orders').DataTable().ajax.reload();
                        },
                        error: function(xhr) {
                            let message = xhr.responseJSON?.message || 'Failed to update order.';
                            if (xhr.responseJSON?.errors) {
                                // Format validation errors
                                const errors = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                                message = `Validation failed:<br>${errors}`;
                            }
                            Swal.fire({
                                title: 'Error!',
                                html: message,
                                icon: 'error'
                            });
                        }
                    });
                });

                // Reset edit modal on close
                $('#kt_modal_edit_order').on('hidden.bs.modal', function() {
                    $('#kt_modal_edit_order_form')[0].reset();
                    $('#edit_image_preview').css('background-image', 'url({{ asset('backend/assets/media/avatars/300-1.jpg') }})');
                });






                // delete order
                $(document).on('click', '.delete-order-btn', function(e) {
                    e.preventDefault();
                    let orderId = $(this).data('id');

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "This action cannot be undone!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        cancelButtonColor: '#3085d6',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            let deleteUrl = "{{ route('orders.destroy', ['order' => '___id___']) }}".replace('___id___',
                                orderId);
                            $.ajax({
                                url: deleteUrl,
                                type: "DELETE",
                                data: {
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(response) {
                                    Swal.fire(
                                        'Deleted!',
                                        response.message,
                                        'success'
                                    );
                                    $('#kt_table_orders').DataTable().ajax.reload();
                                },
                                error: function(xhr) {
                                    Swal.fire(
                                        'Error!',
                                        xhr.responseJSON?.message || 'Something went wrong.',
                                        'error'
                                    );
                                }
                            });
                        }
                    });
                });


                // add service filtered based on category
                const addCategorySelect = document.getElementById('category-select');
                const addServiceSelect = document.getElementById('service-select');
                const addServiceOptions = addServiceSelect.querySelectorAll('option');

                // Handle the "Click before Category" Alert
                addServiceSelect.addEventListener('mousedown', function(e) {
                    if (addCategorySelect.value === "") {
                        e.preventDefault(); // Prevents the dropdown from opening
                        this.blur();        // Removes focus from the element
                        alert("Please select a category first");
                    }
                });

                // Handle the Filtering Logic
                addCategorySelect.addEventListener('change', function() {
                    const categoryId = this.value;
                    
                    // Reset service selection when category changes
                    addServiceSelect.value = "";

                    addServiceOptions.forEach(option => {
                        const parentId = option.getAttribute('data-parent');
                        
                        if (!parentId) return; // Skip the placeholder option

                        if (parentId == categoryId) {
                            option.style.display = "block";
                        } else {
                            option.style.display = "none";
                        }
                    });
                });

                const editCategorySelect = document.getElementById('edit_category');
                const editServiceSelect = document.getElementById('edit_service');
                const editServiceOptions = editServiceSelect.querySelectorAll('option');

                // Handle the "Click before Category" Alert
                editServiceSelect.addEventListener('mousedown', function(e) {
                    if (editCategorySelect.value === "") {
                        e.preventDefault(); // Prevents the dropdown from opening
                        this.blur();        // Removes focus from the element
                        alert("Please select a category first");
                    }
                });

                // Handle the Filtering Logic
                editCategorySelect.addEventListener('change', function() {
                    const categoryId = this.value;
                    
                    // Reset service selection when category changes
                    editServiceSelect.value = "";

                    editServiceOptions.forEach(option => {
                        const parentId = option.getAttribute('data-parent');
                        
                        if (!parentId) return; // Skip the placeholder option

                        if (parentId == categoryId) {
                            option.style.display = "block";
                        } else {
                            option.style.display = "none";
                        }
                    });
                });
            </script>
        @endpush
    @endsection