@extends('layouts.master')
@php
    $pageTitle = trans('admin.custom_request_hub');
@endphp
@section('title', $pageTitle)

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/sweetalert2/sweetalert2.css') }}" />
    <style>
        .select2-results__option, .select2-selection__rendered {
            color: #6f6b7d;
        }
        .new-order-flash {
            animation: pulse-bg 2s infinite;
        }
        @keyframes pulse-bg {
            0% { background-color: rgba(115, 103, 240, 0.1); }
            50% { background-color: rgba(115, 103, 240, 0.3); }
            100% { background-color: rgba(115, 103, 240, 0.1); }
        }
        .fulfillment-option {
            transition: all 0.3s ease;
            border: 1px solid rgba(75, 70, 92, 0.1);
            cursor: pointer;
        }
        .fulfillment-option:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 1rem rgba(165, 163, 174, 0.15);
            border-color: #7367f0;
        }
        .fulfillment-option.active {
            background-color: rgba(115, 103, 240, 0.08);
            border-color: #7367f0;
        }
    </style>
@endsection

@section('content')
    @include('layouts._breadcrumb', [
        'list' => [
            ['data' => trans('admin.dashboard'), 'url' => route('admin.landing')],
            ['data' => $pageTitle, 'url' => null],
        ],
    ])

    <!-- Real-time Alert Notification -->
    <div id="new-order-alert" class="alert alert-primary d-none flex-row align-items-center mb-4" role="alert">
        <i class="ti ti-bell ti-xs me-2"></i>
        <div class="flex-grow-1">
            <span class="fw-bold">{{ trans('admin.new_custom_request_title') }}</span> {{ trans('admin.new_custom_request_msg') }}
        </div>
        <button type="button" class="btn btn-sm btn-primary ms-3" onclick="location.reload()">
            <i class="ti ti-refresh me-1"></i> {{ trans('admin.refresh_list') }}
        </button>
    </div>

    <!-- Hub Info Cards -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card bg-label-info cursor-pointer fulfillment-card" data-type="direct" id="card-direct">
                <div class="card-body d-flex align-items-center">
                    <div class="avatar avatar-md me-3">
                        <span class="avatar-initial rounded bg-info"><i class="ti ti-user-check ti-md"></i></span>
                    </div>
                    <div>
                        <h5 class="card-title mb-0">{{ trans('admin.direct_fulfillment') }}</h5>
                        <p class="card-text small mb-0">{{ trans('admin.direct_fulfillment_help') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card bg-label-success cursor-pointer fulfillment-card" data-type="provider" id="card-provider">
                <div class="card-body d-flex align-items-center">
                    <div class="avatar avatar-md me-3">
                        <span class="avatar-initial rounded bg-success"><i class="ti ti-users ti-md"></i></span>
                    </div>
                    <div>
                        <h5 class="card-title mb-0">{{ trans('admin.provider_fulfillment') }}</h5>
                        <p class="card-text small mb-0">{{ trans('admin.provider_fulfillment_help') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <form id="filter_form" class="row g-3">
                <input type="hidden" name="type" value="custom">
                <input type="hidden" name="fulfillment_type" id="fulfillment_type_filter" value="">
                <div class="col-md-2">
                    <label class="form-label">{{ trans('admin.status') }}</label>
                    <select name="status" class="form-select select2">
                        <option value="">{{ trans('admin.all_statuses') }}</option>
                        @foreach ($statuses as $status)
                            <option value="{{ $status->value }}">{{ $status->name() }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ trans('admin.client') }}</label>
                    <select name="client_id" class="form-select select2-ajax" data-role="client">
                        <option value="">{{ trans('admin.select_client') }}</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ trans('admin.duration') }}</label>
                    <div class="input-group">
                        <input type="text" name="date_from" class="form-control flatpickr" placeholder="{{ trans('admin.from_date') }}" />
                        <input type="text" name="date_to" class="form-control flatpickr" placeholder="{{ trans('admin.to_date') }}" />
                    </div>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button type="button" class="btn btn-primary btn-filter w-100 me-2">{{ trans('admin.filter') }}</button>
                    <button type="reset" class="btn btn-label-secondary btn-reset w-100">{{ trans('admin.reset') }}</button>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header border-bottom d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">{{ trans('admin.custom_hub_pending_title') }}</h5>
            <div class="d-flex align-items-center">
                <span class="badge bg-label-primary me-2" id="last-update-time">{{ trans('admin.last_update') }}: {{ trans('admin.just_now') }}</span>
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" type="checkbox" id="auto-refresh" checked>
                    <label class="form-check-label" for="auto-refresh">{{ trans('admin.real_time_polling') }}</label>
                </div>
            </div>
        </div>
        <div class="card-datatable table-responsive pt-0">
            <table class="datatable table table-bordered table-striped">
                <thead>
                    <tr>
                        <th></th>
                        <th>{{ trans('admin.id') }}</th>
                        <th>{{ trans('admin.client') }}</th>
                        <th>{{ trans('admin.service_name') }}</th>
                        <th>{{ trans('admin.total') }}</th>
                        <th>{{ trans('admin.status') }}</th>
                        <th>{{ trans('admin.fulfillment') }}</th>
                        <th>{{ trans('admin.created_at') }}</th>
                        <th>{{ trans('admin.action') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@section('vendor-script')
    <script src="{{ asset('admin_assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/select2/select2.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/sweetalert2/sweetalert2.js') }}"></script>
@endsection

@section('page-script')
    @include('layouts._datatable', [
        'url' => route('admin.order.custom_hub'),
        'header' => $pageTitle,
        'columns' => [
            ['data' => ''],
            ['data' => 'id', 'name' => 'id'],
            ['data' => 'client_name', 'name' => 'client.name'],
            ['data' => 'service_name', 'name' => 'custom_service_name'],
            ['data' => 'price', 'name' => 'price'],
            ['data' => 'status', 'name' => 'status'],
            ['data' => 'fulfillment', 'name' => 'fulfillment_type'],
            ['data' => 'created_at', 'name' => 'created_at'],
            ['data' => 'actions', 'name' => 'actions', 'orderable' => false, 'searchable' => false],
        ],
    ])

    <script>
        $(document).ready(function() {
            var lastOrderId = 0;
            var isFirstLoad = true;

            $(".flatpickr").flatpickr({
                dateFormat: "Y-m-d"
            });

            $(".select2").select2();

            $(".select2-ajax").each(function() {
                var role = $(this).data('role');
                $(this).select2({
                    ajax: {
                        url: "{{ route('admin.app_user.select2') }}",
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term,
                                role: role
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: data.data,
                                pagination: {
                                    more: data.next_page_url !== null
                                }
                            };
                        },
                        cache: true
                    },
                    placeholder: "{{ trans('admin.select') }}",
                    allowClear: true
                });
            });

            $('.btn-filter').on('click', function() {
                datatable.ajax.reload();
            });

            $('.btn-reset').on('click', function() {
                $('#filter_form')[0].reset();
                $('.select2, .select2-ajax').val(null).trigger('change');
                datatable.ajax.reload();
            });

            // Listen for global new order event instead of local polling
            $(document).on('new-custom-order-received', function(event, response) {
                // Show local alert on this page
                $('#new-order-alert').removeClass('d-none').addClass('d-flex');
                
                // Reload Datatable
                datatable.ajax.reload(null, false);
                
                // Update local time
                $('#last-update-time').text("{{ trans('admin.last_update') }}: " + new Date().toLocaleTimeString());
            });

            // Sync initial lastOrderId from datatable data
            datatable.on('xhr', function() {
                var data = datatable.ajax.json().data;
                if (data && data.length > 0) {
                    var maxId = 0;
                    data.forEach(function(item) {
                        if (item.id > maxId) maxId = item.id;
                    });
                    // Sync with localStorage so global polling knows we've seen these
                    var currentGlobal = localStorage.getItem('last_seen_custom_order_id') || 0;
                    if (maxId > currentGlobal) {
                        localStorage.setItem('last_seen_custom_order_id', maxId);
                    }
                }
                $('#last-update-time').text("{{ trans('admin.last_update') }}: " + new Date().toLocaleTimeString());
            });

            // Status Update Logic
            $(document).on('click', '.update-status', function() {
                var orderId = $(this).data('id');
                var currentStatus = $(this).data('status');
                var updateUrl = "{{ route('admin.order.update_status', ':id') }}".replace(':id', orderId);

                var statusOptions = {};
                @foreach ($statuses as $status)
                    statusOptions["{{ $status->value }}"] = "{{ $status->name() }}";
                @endforeach

                Swal.fire({
                    title: "{{ trans('admin.update_order_status') }}",
                    input: 'select',
                    inputOptions: statusOptions,
                    inputValue: currentStatus,
                    showCancelButton: true,
                    confirmButtonText: "{{ trans('admin.yes_update_it') }}",
                    cancelButtonText: "{{ trans('admin.cancel') }}",
                    showLoaderOnConfirm: true,
                    preConfirm: (newStatus) => {
                        return $.ajax({
                            url: updateUrl,
                            type: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}",
                                status: newStatus
                            }
                        }).catch(xhr => {
                            Swal.showValidationMessage(
                                xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : "{{ trans('admin.something_went_wrong') }}"
                            );
                        });
                    },
                    allowOutsideClick: () => !Swal.isLoading()
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            icon: 'success',
                            title: result.value.message,
                            showConfirmButton: false,
                            timer: 1500
                        });
                        datatable.ajax.reload(null, false);
                    }
                });
            });

            // Fulfillment Type Card Click
            $('.fulfillment-card').on('click', function() {
                var type = $(this).data('type');
                var current = $('#fulfillment_type_filter').val();

                if (current === type) {
                    $('#fulfillment_type_filter').val('');
                    $('.fulfillment-card').removeClass('border border-primary shadow');
                } else {
                    $('#fulfillment_type_filter').val(type);
                    $('.fulfillment-card').removeClass('border border-primary shadow');
                    $(this).addClass('border border-primary shadow');
                }
                datatable.ajax.reload();
            });

            // Accept Custom Order (with fulfillment type + provider selection)
            $(document).on('click', '.accept-custom', function() {
                var orderId = $(this).data('id');
                var url = "{{ route('admin.order.accept_custom', ':id') }}".replace(':id', orderId);

                Swal.fire({
                    title: "{{ trans('admin.approve_and_set_price') }}",
                    html: `
                        <div class="row g-3 mt-2">
                            <div class="col-12 text-start">
                                <label class="form-label fw-bold">{{ trans('admin.set_initial_price') }} ({{ trans('admin.sar') }})</label>
                                <input type="number" id="approval-price" class="form-control" placeholder="0.00" step="0.01" min="0">
                                <hr class="my-3">
                                <label class="form-label fw-bold text-muted mb-2">{{ trans('admin.select_fulfillment_type') }}</label>
                            </div>
                            <div class="col-12">
                                <div class="card fulfillment-option p-3 text-start" data-type="direct" style="cursor: pointer; border: 1px solid #eee;">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar avatar-md me-3">
                                            <span class="avatar-initial rounded bg-label-info"><i class="ti ti-user-check ti-md"></i></span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1">{{ trans('admin.direct_fulfillment') }}</h6>
                                            <small class="text-muted">{{ trans('admin.direct_fulfillment_help') }}</small>
                                        </div>
                                        <div class="ms-2">
                                            <i class="ti ti-chevron-right text-muted"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="card fulfillment-option p-3 text-start" data-type="provider" style="cursor: pointer; border: 1px solid #eee;">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar avatar-md me-3">
                                            <span class="avatar-initial rounded bg-label-success"><i class="ti ti-users ti-md"></i></span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1">{{ trans('admin.provider_fulfillment') }}</h6>
                                            <small class="text-muted">{{ trans('admin.provider_fulfillment_help') }}</small>
                                        </div>
                                        <div class="ms-2">
                                            <i class="ti ti-chevron-right text-muted"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 d-none" id="hub-provider-select-section">
                                <hr class="my-2">
                                <label class="form-label fw-bold">{{ trans('admin.select_provider') }}</label>
                                <select id="hub-approval-provider-select" class="form-select" style="width: 100%;">
                                    <option value="">{{ trans('admin.select_provider') }}</option>
                                </select>
                                <small class="text-muted mt-1 d-block">{{ trans('admin.select_provider_optional_help') }}</small>
                                <button type="button" class="btn btn-success w-100 mt-3" id="btn-hub-confirm-approval">
                                    <i class="ti ti-check me-1"></i> {{ trans('admin.confirm') }}
                                </button>
                            </div>
                        </div>
                    `,
                    showConfirmButton: false,
                    showCancelButton: true,
                    cancelButtonText: "{{ trans('admin.cancel') }}",
                    customClass: {
                        cancelButton: 'btn btn-label-secondary mt-3'
                    },
                    buttonsStyling: false,
                    didOpen: () => {
                        const content = Swal.getHtmlContainer();
                        const options = content.querySelectorAll('.fulfillment-option');
                        var selectedType = null;

                        // Initialize Select2 for provider search
                        $('#hub-approval-provider-select').select2({
                            ajax: {
                                url: "{{ route('admin.app_user.select2') }}",
                                dataType: 'json',
                                delay: 250,
                                data: function (params) {
                                    return { q: params.term, role: 'provider' };
                                },
                                processResults: function (data) {
                                    return {
                                        results: data.data,
                                        pagination: { more: data.next_page_url !== null }
                                    };
                                },
                                cache: true
                            },
                            placeholder: "{{ trans('admin.select_provider') }}",
                            allowClear: true,
                            dropdownParent: $(content)
                        });

                        // Fulfillment type click handler
                        options.forEach(option => {
                            option.addEventListener('click', () => {
                                const type = option.getAttribute('data-type');
                                const price = document.getElementById('approval-price').value;

                                if (!price || price < 0) {
                                    Swal.showValidationMessage("{{ trans('admin.please_enter_valid_price') }}");
                                    return;
                                }

                                // Highlight selected option
                                options.forEach(o => o.classList.remove('active'));
                                option.classList.add('active');
                                selectedType = type;

                                if (type === 'direct') {
                                    // Direct: submit immediately
                                    document.getElementById('hub-provider-select-section').classList.add('d-none');
                                    Swal.showLoading();
                                    submitHubApproval(url, price, type, null);
                                } else {
                                    // Provider: show provider selection
                                    document.getElementById('hub-provider-select-section').classList.remove('d-none');
                                }
                            });
                        });

                        // Confirm button for provider selection
                        document.getElementById('btn-hub-confirm-approval').addEventListener('click', () => {
                            const price = document.getElementById('approval-price').value;
                            const providerId = $('#hub-approval-provider-select').val();

                            if (!price || price < 0) {
                                Swal.showValidationMessage("{{ trans('admin.please_enter_valid_price') }}");
                                return;
                            }

                            Swal.showLoading();
                            submitHubApproval(url, price, 'provider', providerId);
                        });

                        function submitHubApproval(url, price, type, providerId) {
                            var data = {
                                _token: "{{ csrf_token() }}",
                                fulfillment_type: type,
                                price: price
                            };
                            if (providerId) {
                                data.provider_id = providerId;
                            }

                            $.ajax({
                                url: url,
                                type: 'POST',
                                data: data,
                                success: function(response) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: "{{ trans('admin.updated_successfully') }}",
                                        showConfirmButton: false,
                                        timer: 1500
                                    });
                                    datatable.ajax.reload(null, false);
                                },
                                error: function(xhr) {
                                    Swal.fire({
                                        icon: 'error',
                                        title: "{{ trans('admin.error') }}",
                                        text: xhr.responseJSON ? xhr.responseJSON.message : "{{ trans('admin.something_went_wrong') }}"
                                    });
                                }
                            });
                        }
                    }
                });
            });

            // Reject Custom Order
            $(document).on('click', '.reject-custom', function() {
                var orderId = $(this).data('id');
                var url = "{{ route('admin.order.reject_custom', ':id') }}".replace(':id', orderId);

                Swal.fire({
                    title: "{{ trans('admin.are_you_sure') }}",
                    text: "{{ trans('admin.reject_custom_order_msg') }}",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ea5455',
                    confirmButtonText: "{{ trans('admin.yes_reject_it') }}",
                    cancelButtonText: "{{ trans('admin.cancel') }}",
                    showLoaderOnConfirm: true,
                    preConfirm: () => {
                        return $.ajax({
                            url: url,
                            type: 'POST',
                            data: { _token: "{{ csrf_token() }}" }
                        }).catch(xhr => {
                            Swal.showValidationMessage(xhr.responseJSON.message || "{{ trans('admin.something_went_wrong') }}");
                        });
                    },
                    allowOutsideClick: () => !Swal.isLoading()
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({ icon: 'success', title: result.value.message, showConfirmButton: false, timer: 1500 });
                        datatable.ajax.reload(null, false);
                    }
                });
            });

            // Push to Providers
            $(document).on('click', '.push-to-providers', function() {
                var orderId = $(this).data('id');
                var url = "{{ route('admin.order.push_to_providers', ':id') }}".replace(':id', orderId);

                Swal.fire({
                    title: "{{ trans('admin.are_you_sure') }}",
                    text: "{{ trans('admin.are_you_sure_push') }}",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: "{{ trans('admin.push_to_providers') }}",
                    cancelButtonText: "{{ trans('admin.cancel') }}",
                    customClass: {
                        confirmButton: 'btn btn-warning me-3',
                        cancelButton: 'btn btn-label-secondary'
                    },
                    buttonsStyling: false,
                    showLoaderOnConfirm: true,
                    preConfirm: () => {
                        return $.ajax({
                            url: url,
                            type: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}"
                            }
                        }).catch(xhr => {
                            Swal.showValidationMessage(xhr.responseJSON.message || "{{ trans('admin.something_went_wrong') }}");
                        });
                    },
                    allowOutsideClick: () => !Swal.isLoading()
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            icon: 'success',
                            title: "{{ trans('admin.order_pushed_successfully') }}",
                            showConfirmButton: false,
                            timer: 1500
                        });
                        datatable.ajax.reload(null, false);
                    }
                });
            });
        });
    </script>
    @include('layouts._delete')
@endsection