@php
    use App\Enums\PermissionEnum;
    use App\Enums\UserAppRoleEnum;
    use App\Services\UserPermissionService;
    use App\Enums\ConfigurationEnum;
@endphp
@extends('layouts.master')
@section('title', trans('admin.subscriptions_list'))

@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/datatables-buttons-bs5/buttons.bootstrap5.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/sweetalert2/sweetalert2.css') }}" />
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}" />
@endsection

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

    <div class="card mb-4">
        <div class="card-body">
            <form id="filter_form" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">{{ trans('admin.status') }}</label>
                    <select name="status" id="status" class="form-select select2">
                        <option value="">{{ trans('admin.all') }}</option>
                        <option value="1">{{ trans('admin.active') }}</option>
                        <option value="0">{{ trans('admin.inactive') }}</option>
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label">{{ trans('admin.search_name') }}</label>
                    <input type="text" name="name" id="name" class="form-control" placeholder="{{ trans('admin.name') }}">
                </div>

                <div class="col-md-6 text-end pt-4">
                    <button type="button" id="btn_filter" class="btn btn-primary">{{ trans('admin.filter') }}</button>
                    @if(UserPermissionService::can(PermissionEnum::CONFIGURATION_EDIT))
                        <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#commissionModal">{{ trans('admin.update_commission') }}</button>
                    @endif
                    @if(UserPermissionService::can(PermissionEnum::SUBSCRIPTION_ASSIGN))
                        <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#bulkSwitchModal">{{ trans('admin.bulk_switch_providers') }}</button>
                    @endif
                    <a href="{{ url()->current() }}" class="btn btn-label-secondary">{{ trans('admin.reset') }}</a>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-datatable table-responsive pt-0">
            <table class="datatable table table-bordered table-striped">
                <thead>
                    <tr>
                        <th style="width: 30px;">#</th>
                        <th>{{ trans('admin.id') }}</th>
                        <th>{{ trans('admin.name') }}</th>
                        <th>{{ trans('admin.price') }}</th>
                        <th>{{ trans('admin.duration_days') }}</th>
                        <th>{{ trans('admin.providers_count') }}</th>
                        <th>{{ trans('admin.active') }}</th>
                        <th>{{ trans('admin.actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <!-- Assign Providers Modal -->
    <div class="modal fade" id="assignProvidersModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content p-3 p-md-5">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="text-center mb-4">
                        <h3 class="mb-2">{{ trans('admin.assign_to_providers') }}</h3>
                        <p class="text-muted">{{ trans('admin.assign_subscription') }} (<span id="sub-name-display" class="fw-bold"></span>) {{ trans('admin.to_providers') }}</p>
                    </div>
                    <form id="assignProvidersForm" class="row g-3">
                        @csrf
                        <input type="hidden" id="modal-sub-id" name="subscription_id">
                        <div class="col-12">
                            <label class="form-label" for="provider_ids">{{ trans('admin.providers') }}</label>
                            <select id="provider_ids" name="provider_ids[]" class="select2 form-select" multiple data-placeholder="{{ trans('admin.select_providers') }}">
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="payment_type">{{ trans('admin.payment_type') }}</label>
                            <select id="payment_type" name="payment_type" class="form-select" required>
                                <option value="free">{{ trans('admin.free') }}</option>
                                <option value="wallet">{{ trans('admin.wallet') }}</option>
                            </select>
                        </div>
                        <div class="col-12 text-center mt-4">
                            <button type="submit" class="btn btn-primary me-sm-3 me-1">{{ trans('admin.save') }}</button>
                            <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">{{ trans('admin.cancel') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Subscribed Providers List Modal -->
    <div class="modal fade" id="listModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-simple modal-enable-otp modal-dialog-centered">
            <div class="modal-content p-3 p-md-5">
                <div class="modal-body">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="text-center mb-4">
                        <h3 class="mb-2">{{ trans('admin.subscribed_providers') }}</h3>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="listTable">
                            <thead>
                                <tr>
                                    <th>{{ trans('admin.name') }}</th>
                                    <th>{{ trans('admin.phone') }}</th>
                                    <th>{{ trans('admin.action') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bulk Switch Modal -->
    <div class="modal fade" id="bulkSwitchModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content p-3 p-md-5">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="text-center mb-4">
                        <h3 class="mb-2">{{ trans('admin.bulk_switch_providers') }}</h3>
                        <p class="text-muted">{{ trans('admin.switch_all_providers_to_selected_mode') }}</p>
                    </div>
                    <form id="bulkSwitchForm" class="row g-3">
                        @csrf
                        <div class="col-12">
                            <label class="form-label" for="bulk_working_mode">{{ trans('admin.working_mode') }}</label>
                            <select id="bulk_working_mode" name="working_mode" class="form-select" required>
                                <option value="commission">{{ trans('admin.commission') }}</option>
                                <option value="subscription">{{ trans('admin.subscription') }}</option>
                            </select>
                        </div>
                        <div class="col-12 d-none" id="bulk_subscription_container">
                            <label class="form-label" for="bulk_subscription_id">{{ trans('admin.subscription') }}</label>
                            <select id="bulk_subscription_id" name="subscription_id" class="select2 form-select" data-placeholder="{{ trans('admin.select_subscription') }}">
                            </select>
                        </div>
                        <div class="col-12 text-center mt-4">
                            <button type="submit" class="btn btn-primary me-sm-3 me-1">{{ trans('admin.yes_switch_all') }}</button>
                            <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">{{ trans('admin.cancel') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Commission Modal -->
    <div class="modal fade" id="commissionModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content p-3 p-md-5">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="text-center mb-4">
                        <h3 class="mb-2">{{ trans('admin.update_commission') }}</h3>
                        <p class="text-muted">{{ trans('admin.set_system_wide_commission_percentage') }}</p>
                    </div>
                    <form id="commission_form" class="row g-3">
                        @csrf
                        <div class="col-12">
                            <label class="form-label" for="commission_input">{{ trans('admin.commission_percentage') }} (%)</label>
                            <input type="number" name="commission" id="commission_input_modal" class="form-control" 
                                value="{{ i8_config(ConfigurationEnum::COMMISSION_PERCENTAGE) }}" 
                                min="0" max="100" step="0.01" required>
                        </div>
                        <div class="col-12 text-center mt-4">
                            <button type="submit" class="btn btn-primary me-sm-3 me-1">{{ trans('admin.save') }}</button>
                            <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">{{ trans('admin.cancel') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Subscription Form Modal -->
    <div class="modal fade" id="subscriptionFormModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content p-3 p-md-5">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="text-center mb-4">
                        <h3 class="mb-2" id="subscriptionModalTitle">{{ trans('admin.create_subscription') }}</h3>
                    </div>
                    <form id="subscription_main_form" class="row g-3">
                        @csrf
                        <input type="hidden" id="subscription_id" name="id">
                        @include('subscription._form', ['subscription' => new \App\Models\Subscription])
                        <div class="col-12 text-center mt-4">
                            <button type="submit" class="btn btn-primary me-sm-3 me-1">{{ trans('admin.save') }}</button>
                            <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">{{ trans('admin.cancel') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </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/sweetalert2/sweetalert2.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/select2/select2.js') }}"></script>
@endsection

@section('page-script')
    @include('layouts._datatable', [
        'url' => route('admin.subscription.index'),
        'buttonName' => trans('admin.create_subscription'),
        'permissionCreateEnum' => PermissionEnum::SUBSCRIPTION_CREATE,
        'urlExport' => route('admin.subscription.export'),
        'permissionExportEnum' => PermissionEnum::SUBSCRIPTION_EXPORT,
        'header' => trans('admin.subscriptions_list'),
        'customButtons' => [
            [
                'text' => '<i class="ti ti-plus me-sm-1"></i> <span class="d-none d-sm-inline-block">'.trans('admin.create_subscription').'</span>',
                'className' => 'btn btn-primary waves-effect waves-light',
                'action' => 'openCreateModal'
            ]
        ],
        'columns' => [
            ['data' => 'DT_RowIndex', 'name' => 'index', 'searchable' => false, 'orderable' => false],
            ['data' => 'id', 'name' => 'id'],
            ['data' => 'name', 'name' => 'name_ar'],
            ['data' => 'price', 'name' => 'price'],
            ['data' => 'duration_days', 'name' => 'duration_days'],
            ['data' => 'providers_count', 'name' => 'providers_count', 'searchable' => false, 'orderable' => false],
            ['data' => 'active', 'name' => 'is_active', 'searchable' => false],
            ['data' => 'actions', 'name' => 'actions', 'orderable' => false, 'searchable' => false],
        ],
    ])

    @include('layouts._delete')

    <script>
        function openCreateModal() {
            $('#subscriptionModalTitle').text("{{ trans('admin.create_subscription') }}");
            $('#subscription_main_form')[0].reset();
            $('#subscription_id').val('');
            $('#name_ar').val('');
            $('#name_en').val('');
            $('#name_ur').val('');
            $('#name_hi').val('');
            $('#price').val('');
            $('#duration_days').val('');
            $('#is_active').prop('checked', true);
            $('#subscriptionFormModal').modal('show');
        }

        $(function() {
            // Consolidated AJAX Form Handlers
            const forms = ['#filter_form', '#commission_form', '#bulkSwitchForm', '#assignProvidersForm', '#subscription_main_form'];
            
            $(document).on('submit', forms.join(','), function(e) {
                e.preventDefault();
                const formId = $(this).attr('id');
                const form = $(this);
                
                if (formId === 'filter_form') {
                    datatable.draw();
                    return;
                }

                const submitBtn = form.find('button[type="submit"]');
                submitBtn.prop('disabled', true);

                let url = '';
                if (formId === 'commission_form') url = "{{ route('admin.subscription.update_commission') }}";
                else if (formId === 'bulkSwitchForm') {
                    Swal.fire({
                        title: "{{ trans('admin.are_you_sure') }}",
                        text: "{{ trans('admin.this_will_switch_all_providers_working_mode') }}",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: "{{ trans('admin.yes_switch_all') }}",
                        cancelButtonText: "{{ trans('admin.cancel') }}",
                        customClass: {
                            confirmButton: 'btn btn-primary me-3 waves-effect waves-light',
                            cancelButton: 'btn btn-label-secondary waves-effect waves-light'
                        },
                        buttonsStyling: false
                    }).then(function (result) {
                        if (result.isConfirmed) {
                            performAjaxSubmit(form, submitBtn, "{{ route('admin.subscription.bulk_switch_working_mode') }}");
                        } else {
                            submitBtn.prop('disabled', false);
                        }
                    });
                    return;
                }
                else if (formId === 'assignProvidersForm') url = "{{ route('admin.subscription.assign_to_providers') }}";
                else if (formId === 'subscription_main_form') {
                    const id = $('#subscription_id').val();
                    url = id ? "{{ url('admin/subscription/update') }}/" + id : "{{ route('admin.subscription.store') }}";
                }

                performAjaxSubmit(form, submitBtn, url);
            });

            function performAjaxSubmit(form, submitBtn, url) {
                $.ajax({
                    url: url,
                    method: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        $('.modal').modal('hide');
                        Swal.fire({
                            icon: 'success',
                            title: "{{ trans('admin.success') }}",
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false
                        });
                        datatable.draw();
                    },
                    error: function(xhr) {
                        let message = "{{ trans('admin.error') }}";
                        if (xhr.status === 422 && xhr.responseJSON.errors) {
                            message = Object.values(xhr.responseJSON.errors)[0][0];
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }
                        Swal.fire({ icon: 'error', title: 'Error', text: message });
                    },
                    complete: function() {
                        submitBtn.prop('disabled', false);
                    }
                });
            }

            // Edit Logic
            $(document).on('click', '.edit-subscription', function() {
                const id = $(this).data('id');
                $.ajax({
                    url: "{{ url('admin/subscription/edit') }}/" + id,
                    method: 'GET',
                    success: function(subscription) {
                        $('#subscriptionModalTitle').text("{{ trans('admin.edit_subscription') }}");
                        $('#subscription_main_form')[0].reset();
                        $('#subscription_id').val(subscription.id);
                        $('#name_ar').val(subscription.name_ar);
                        $('#name_en').val(subscription.name_en);
                        $('#name_ur').val(subscription.name_ur);
                        $('#name_hi').val(subscription.name_hi);
                        $('#price').val(subscription.price);
                        $('#duration_days').val(subscription.duration_days);
                        $('#is_active').prop('checked', subscription.is_active == 1);
                        $('#subscriptionFormModal').modal('show');
                    }
                });
            });

            // Assign to providers click
            $(document).on('click', '.assign-to-providers', function() {
                const id = $(this).data('id');
                const name = $(this).data('name');
                $('#modal-sub-id').val(id);
                $('#sub-name-display').text(name);
                $('#provider_ids').val(null).trigger('change');
                $('#assignProvidersModal').modal('show');
            });

            // Select2 Init Logic
            $('.select2').each(function() {
                var $this = $(this);
                if (!$this.hasClass('select2-hidden-accessible')) {
                    $this.wrap('<div class="position-relative"></div>').select2({
                        placeholder: $this.data('placeholder'),
                        dropdownParent: $this.parent()
                    });
                }
            });

            // Specific Select2 AJAX
            $('#provider_ids').select2({
                dropdownParent: $('#assignProvidersModal'),
                ajax: {
                    url: "{{ route('admin.app_users_list') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return { term: params.term, role: "{{ UserAppRoleEnum::PROVIDER->value }}", page: params.page || 1 };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        return { results: data.data, pagination: { more: data.next_page_url !== null } };
                    },
                    cache: true
                }
            });

            $('#bulk_subscription_id').select2({
                dropdownParent: $('#bulkSwitchModal'),
                ajax: {
                    url: "{{ route('admin.subscription.select2') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return { term: params.term, active: 1, page: params.page || 1 };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        return { results: data.data, pagination: { more: data.next_page_url !== null } };
                    }
                }
            });

            $('#bulk_working_mode').on('change', function() {
                if ($(this).val() === 'subscription') {
                    $('#bulk_subscription_container').removeClass('d-none');
                    $('#bulk_subscription_id').attr('required', true);
                } else {
                    $('#bulk_subscription_container').addClass('d-none');
                    $('#bulk_subscription_id').attr('required', false);
                }
            });

            // Subscribed Providers Table Logic
            let currentSubscriptionId = null;
            $(document).on('click', '.view-providers-btn', function() {
                currentSubscriptionId = $(this).data('id');
                $('#listModal').modal('show');
            });

            $('#listModal').on('shown.bs.modal', function () {
                if ($.fn.DataTable.isDataTable('#listTable')) {
                    $('#listTable').DataTable().destroy();
                }
                $('#listTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('admin.subscription.index') }}",
                        data: function(d) { d.providers_for_subscription = currentSubscriptionId; }
                    },
                    columns: [
                        {data: 'name', name: 'name'},
                        {data: 'phone', name: 'phone'},
                        {data: 'action', name: 'action', orderable: false, searchable: false}
                    ],
                    responsive: true
                });
            });

            // Final filter button click
            $('#btn_filter').on('click', function() {
                datatable.draw();
            });
        });
    </script>
@endsection