@extends('layouts.simple.master')

@section('title', trans(app()->getLocale() . '.policies_conditions_management'))

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/jquery.dataTables.css') }}">
@endsection

@section('main_content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-sm-6">
                    <h3>{{ trans(app()->getLocale() . '.policies_conditions') }}</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"> <svg class="stroke-icon">
                                    <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                                </svg></a></li>
                        <li class="breadcrumb-item active">{{ trans(app()->getLocale() . '.policies_conditions') }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid starts-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="common-flex mix-hover-btn b-r-15 mb-3" style="justify-content: flex-end;">
                    <button type="button" class="btn btn-border-pop btn-primary" data-bs-toggle="modal" data-bs-target="#policiesConditionModal" onclick="resetPoliciesConditionForm()">{{ trans(app()->getLocale() . '.add_policies_condition') }}</button>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive custom-scrollbar">
                            {!! $dataTable->table() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid Ends-->

    <!-- Policies Condition Modal -->
    <div class="modal fade" id="policiesConditionModal" tabindex="-1" aria-labelledby="policiesConditionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content category-popup">
                <div class="modal-header">
                    <h5 class="modal-title" id="policiesConditionModalLabel">{{ trans(app()->getLocale() . '.add_policies_condition') }}</h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0 custom-input">
                    <div class="text-start">
                        <div class="p-20">
                            <form id="policiesConditionForm" class="row g-3 needs-validation" action="{{ route('admin.policies-conditions.store') }}" method="POST" novalidate>
                                @csrf
                                <input type="hidden" id="policies_condition_id" name="id">

                                <div class="col-md-6">
                                    <label class="form-label">{{ trans(app()->getLocale() . '.title') }} ({{ trans(app()->getLocale() . '.ar') }})<span class="txt-danger">*</span></label>
                                    <input class="form-control" type="text" name="title_ar" id="validationTitleAr"
                                        placeholder="{{ trans(app()->getLocale() . '.enter_title') }} ({{ trans(app()->getLocale() . '.ar') }})" required>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">{{ trans(app()->getLocale() . '.title') }} ({{ trans(app()->getLocale() . '.en') }})<span class="txt-danger">*</span></label>
                                    <input class="form-control" type="text" name="title_en" id="validationTitleEn"
                                        placeholder="{{ trans(app()->getLocale() . '.enter_title') }} ({{ trans(app()->getLocale() . '.en') }})" required>
                                </div>

                                <div class="col-md-12">
                                    <label class="form-label">{{ trans(app()->getLocale() . '.type') }}<span class="txt-danger">*</span></label>
                                    <select class="form-select" name="type" id="validationType" required>
                                        <option value="">{{ trans(app()->getLocale() . '.select_type') }}</option>
                                        <option value="privacy_policy">{{ trans(app()->getLocale() . '.privacy_policy') }}</option>
                                        <option value="terms_and_conditions">{{ trans(app()->getLocale() . '.terms_and_conditions') }}</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">{{ trans(app()->getLocale() . '.content') }} ({{ trans(app()->getLocale() . '.ar') }})<span class="txt-danger">*</span></label>
                                    <textarea class="form-control" name="content_ar" id="validationContentAr" rows="10"
                                        placeholder="{{ trans(app()->getLocale() . '.enter_content') }} ({{ trans(app()->getLocale() . '.ar') }})" required></textarea>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">{{ trans(app()->getLocale() . '.content') }} ({{ trans(app()->getLocale() . '.en') }})<span class="txt-danger">*</span></label>
                                    <textarea class="form-control" name="content_en" id="validationContentEn" rows="10"
                                        placeholder="{{ trans(app()->getLocale() . '.enter_content') }} ({{ trans(app()->getLocale() . '.en') }})" required></textarea>
                                </div>

                                <div class="col-md-12 d-flex justify-content-end">
                                    <button class="btn btn-secondary me-2" type="button" data-bs-dismiss="modal">{{ trans(app()->getLocale() . '.cancel') }}</button>
                                    <button class="btn btn-primary" type="submit" id="submitPoliciesConditionBtn">{{ trans(app()->getLocale() . '.create') }} +</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <!-- calendar js-->
    <script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
    {!! $dataTable->scripts() !!}
    <script src="{{ asset('assets/js/bookmark/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/js/custom-validation/validation.js') }}"></script>

    <script>
        let isEditPoliciesConditionMode = false;
        let editPoliciesConditionId = null;

        // Reset form when opening modal for create
        function resetPoliciesConditionForm() {
            isEditPoliciesConditionMode = false;
            editPoliciesConditionId = null;
            document.getElementById('policiesConditionForm').reset();
            document.getElementById('policies_condition_id').value = '';
            document.getElementById('policiesConditionModalLabel').textContent = '{{ trans(app()->getLocale() . ".add_policies_condition") }}';
            document.getElementById('submitPoliciesConditionBtn').textContent = '{{ trans(app()->getLocale() . ".create") }} +';

            // Remove validation classes
            const form = document.getElementById('policiesConditionForm');
            form.classList.remove('was-validated');
            const inputs = form.querySelectorAll('.form-control, .form-select');
            inputs.forEach(input => {
                input.classList.remove('is-invalid', 'is-valid');
            });
        }

        // Handle edit button click from DataTable
        $(document).on('click', '.edit-icon', function(e) {
            e.preventDefault();
            const editUrl = $(this).attr('href');
            const policiesConditionId = editUrl.split('/').pop();

            // Fetch policies condition data
            $.ajax({
                url: editUrl,
                type: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success: function(data) {
                    isEditPoliciesConditionMode = true;
                    editPoliciesConditionId = data.id;

                    // Populate form
                    document.getElementById('policies_condition_id').value = data.id;
                    document.getElementById('validationTitleAr').value = data.title_ar || '';
                    document.getElementById('validationTitleEn').value = data.title_en || '';
                    document.getElementById('validationType').value = data.type || '';
                    document.getElementById('validationContentAr').value = data.content_ar || '';
                    document.getElementById('validationContentEn').value = data.content_en || '';

                    // Update modal title and button
                    document.getElementById('policiesConditionModalLabel').textContent = '{{ trans(app()->getLocale() . ".edit_policies_condition") }}';
                    document.getElementById('submitPoliciesConditionBtn').textContent = '{{ trans(app()->getLocale() . ".update") }} +';

                    // Remove validation classes
                    const form = document.getElementById('policiesConditionForm');
                    form.classList.remove('was-validated');
                    const inputs = form.querySelectorAll('.form-control, .form-select');
                    inputs.forEach(input => {
                        input.classList.remove('is-invalid', 'is-valid');
                    });

                    // Show modal
                    $('#policiesConditionModal').modal('show');
                },
                error: function(xhr) {
                    console.error('Error fetching policies condition data:', xhr);
                    alert('{{ trans(app()->getLocale() . ".error_loading_policies_condition_data") }}');
                }
            });
        });

        // Handle form submission
        document.getElementById('policiesConditionForm').addEventListener('submit', function(e) {
            const form = this;

            // Validate form
            if (!form.checkValidity()) {
                e.preventDefault();
                e.stopPropagation();
                form.classList.add('was-validated');
                return false;
            }

            // Set form action and method
            if (isEditPoliciesConditionMode && editPoliciesConditionId) {
                form.action = '{{ url("admin/policies-conditions") }}/' + editPoliciesConditionId;
                form.method = 'POST';
                // Add method spoofing for PUT
                if (!form.querySelector('input[name="_method"]')) {
                    const methodInput = document.createElement('input');
                    methodInput.type = 'hidden';
                    methodInput.name = '_method';
                    methodInput.value = 'PUT';
                    form.appendChild(methodInput);
                }
            } else {
                form.action = '{{ route("admin.policies-conditions.store") }}';
                form.method = 'POST';
            }

            // Disable submit button to prevent double submission
            const submitBtn = document.getElementById('submitPoliciesConditionBtn');
            submitBtn.disabled = true;
            submitBtn.textContent = isEditPoliciesConditionMode ? '{{ trans(app()->getLocale() . ".updating") }}' : '{{ trans(app()->getLocale() . ".creating") }}';

            // Form will submit normally, page will reload with session flash message
            return true;
        });

        // Reset form when modal is closed
        $('#policiesConditionModal').on('hidden.bs.modal', function() {
            resetPoliciesConditionForm();
        });
    </script>
@endsection