@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.formscss')
    <style>
        .attachment-item {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            position: relative;
            transition: all 0.3s ease;
        }

        .attachment-item:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .attachment-item .btn-danger {
            z-index: 10;
        }

        #attachments-container {
            max-height: 600px;
            overflow-y: auto;
        }

        .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-header h5 {
            margin-bottom: 0;
        }
    </style>
@endsection
@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"> طرق الشحن </h4>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection
@section('content')
    <!-- row -->
    <div id='blogId'>
        <div>

            <!-- row -->
            <div class="row">
                <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
                    <!--div-->
                    <form id='newjob'>
                        <div class="card">
                            <div class="card-body">
                                <div class="main-content-label mg-b-5">
                                    تعديل بيانات طريقة شحن
                                </div>
                                <div class="row row-sm">
                                    <x-admin.form.input name="id" type="hidden" :value="$agent->id" required />
                                    <x-admin.form.input name="name" label="الإسم" col="4" :value="$agent->name"
                                        required />
                                    <x-admin.form.input name="max" type="float" label="الحد الأقصى" col="4"
                                        required :value="$agent->max" />
                                    <x-admin.form.input name="min" type="float" label="الحد الادنى" col="4"
                                        :value="$agent->min" />
                                    {{-- <input required class="form-control" value="{{ $agent->id }}" name="id"
                                        placeholder="" type="hidden">
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">الإسم</label>
                                        <input required class="form-control" value="{{ $agent->name }}" name="name"
                                            placeholder="" type="text">
                                    </div> --}}

                                    <!--<div class="col-lg-4 mt-3">-->
                                    <!--    <label for="exampleTextarea">ملاحظات</label>-->
                                    <!--    <textarea class="form-control" id="exampleTextarea" name="note" rows="3">{{ $agent->note }}</textarea>-->
                                    <!--</div>-->
                                    <div class="col-lg-4 mt-2">
                                        <p class="mt-0"> العملة ؟ </p>
                                        <select name="currency_id" class="form-control" required>
                                            <option value=""> اختر عملة </option>
                                            @foreach (\App\Models\Currency::all() as $c)
                                                <option {{ $agent->currency_id == $c->id ? 'selected' : '' }}
                                                    value="{{ $c->id }}"> {{ $c->name }} </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label"> الصورة </label>
                                        <input class="form-control" name="image" type="file">
                                    </div>
                                    <div class="col-lg-4 mt-2">
                                        <p class="mt-0"> ضريبه او خصم </p>
                                        <select name="tax" class="form-control" required>
                                            <option value=""> اختر </option>
                                            <option {{ $agent->tax_value == '0' ? 'selected' : '' }} value="0"> لا يوجد
                                            </option>
                                            <option {{ $agent->tax_value == '1' ? 'selected' : '' }} value="1"> خصم
                                            </option>
                                            <option {{ $agent->tax_value == '2' ? 'selected' : '' }} value="2"> ضريبه
                                            </option>

                                        </select>
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label"> النسبة </label>
                                        <input class="form-control" value="{{ $agent->percent }}" name="percent"
                                            placeholder="" type="float">
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label">يتطلب أن يكون المستخدم موثق</label>
                                        <select name="requires_verified" class="form-control">
                                            <option value="0" {{ !$agent->requires_verified ? 'selected' : '' }}>لا
                                            </option>
                                            <option value="1" {{ $agent->requires_verified ? 'selected' : '' }}>نعم
                                            </option>
                                        </select>
                                    </div>
                                    {{-- <div class="col-lg-4 mt-3">
                                        <label class="form-label"> max </label>
                                        <input class="form-control" value="{{ $agent->max }}" name="max"
                                            placeholder="" type="float">
                                    </div> --}}
                                    {{-- <div class="col-lg-4 mt-3">
                                        <label class="form-label"> min </label>
                                        <input class="form-control" value="{{ $agent->min }}" name="min"
                                            placeholder="" type="float">
                                    </div> --}}
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label"> الحالة </label>
                                        <select name="isActive" class="form-control" required>
                                            <option value="1" {{ $agent->isActive == 1 ? 'selected' : '' }}>مفعل
                                            </option>
                                            <option value="0" {{ $agent->isActive == 0 ? 'selected' : '' }}>غير مفعل
                                            </option>
                                        </select>
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label"> اوتوماتيكي </label>
                                        <select name="isAutomatic" class="form-control" required>
                                            <option value="1" {{ $agent->isAutomatic == 1 ? 'selected' : '' }}>مفعل
                                            </option>
                                            <option value="0" {{ $agent->isAutomatic == 0 ? 'selected' : '' }}>غير
                                                مفعل
                                            </option>
                                        </select>
                                    </div>
                                    <div class="col-lg-4 mt-3">
                                        <label class="form-label"> رقم العملية </label>
                                        <select name="hasOperationNumber" class="form-control">
                                            <option value="0" {{ $agent->hasOperationNumber == 0 ? 'selected' : '' }}>
                                                لا</option>
                                            <option value="1" {{ $agent->hasOperationNumber == 1 ? 'selected' : '' }}>
                                                نعم</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-12 mt-3">
                                        <textarea id="elm1" name="note">{{ $agent->note }}</textarea>
                                    </div>

                                    <!-- حقول العناوين الثلاثة -->
                                    <x-admin.form.input name="title_1" label="العنوان الأول" col="4"
                                        :value="$agent->title_1" />
                                    <x-admin.form.input name="title_2" label="العنوان الثاني" col="4"
                                        :value="$agent->title_2" />
                                    <x-admin.form.input name="title_3" label="العنوان الثالث" col="4"
                                        :value="$agent->title_3" />

                                    <!-- Blocked Vendors Section -->
                                    <div class="col-lg-12 mt-4">
                                        <div class="card">
                                            <div class="card-header">
                                                <h5 class="card-title">حظر طريقة الشحن عن تجار معينين</h5>
                                            </div>
                                            <div class="card-body">
                                                <p class="text-muted mb-3">اختر التجار الذين لا تريد أن يرى
                                                    مستخدموهم طريقة الشحن هذه</p>
                                                <select name="blocked_vendors[]" class="form-control" multiple
                                                    size="6">
                                                    @foreach ($vendors as $vendor)
                                                        <option value="{{ $vendor->id }}"
                                                            {{ $agent->blockedVendors->contains('id', $vendor->id) ? 'selected' : '' }}>
                                                            {{ $vendor->user?->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Rotating Titles Section -->
                                    <div class="col-lg-12 mt-4">
                                        <div class="card">
                                            <div class="card-header">
                                                <h5 class="card-title">العناوين المتغيرة (تظهر بالتناوب للمستخدم)</h5>
                                                <button type="button" onclick="addRotatingTitle()"
                                                    class="btn btn-primary btn-sm">
                                                    <x-lucide-plus width="20" height="20" /> إضافة عنوان
                                                </button>
                                            </div>
                                            <div class="card-body">
                                                <p class="text-muted mb-3">أضف عناوين متعددة وستظهر للمستخدم بالتناوب في كل
                                                    مرة يشاهد فيها هذه الطريقة</p>
                                                <div id="rotating-titles-container">
                                                    @php $rotatingTitles = $agent->rotating_titles ?? []; @endphp
                                                    @foreach ($rotatingTitles as $index => $title)
                                                        <div class="rotating-title-item input-group mb-2"
                                                            id="rotating-title-{{ $index }}">
                                                            <input type="text" name="rotating_titles[]"
                                                                class="form-control" value="{{ $title }}"
                                                                placeholder="أدخل العنوان">
                                                            <button type="button" class="btn btn-danger"
                                                                onclick="removeRotatingTitle({{ $index }})">
                                                                <x-lucide-trash-2 width="20" height="20" />
                                                            </button>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Attachments Section -->
                                    <div class="col-lg-12 mt-4">
                                        <div class="card">
                                            <div class="card-header">
                                                <h5 class="card-title">الحقول الإضافية</h5>
                                                <button type="button" onclick="addAttachment()"
                                                    class="btn btn-primary btn-sm">
                                                    <x-lucide-plus width="20" height="20" /> إضافة حقل
                                                </button>
                                            </div>
                                            <div class="card-body">
                                                <div id="attachments-container">
                                                    @foreach ($agent->attachments as $index => $attachment)
                                                        <div class="attachment-item border p-3 mb-3 rounded position-relative"
                                                            id="attachment-{{ $index }}">
                                                            <input type="hidden"
                                                                name="attachments[{{ $index }}][id]"
                                                                value="{{ $attachment->id }}">

                                                            <button type="button"
                                                                onclick="removeAttachment({{ $index }})"
                                                                class="btn btn-danger btn-sm position-absolute"
                                                                style="top: 10px; left: 10px;">
                                                                <x-lucide-trash-2 width="20" height="20" />
                                                            </button>

                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <label class="form-label">اسم الحقل</label>
                                                                    <input type="text"
                                                                        name="attachments[{{ $index }}][name]"
                                                                        class="form-control"
                                                                        value="{{ $attachment->name }}" required>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label class="form-label">النص المساعد
                                                                        (Placeholder)
                                                                    </label>
                                                                    <input type="text"
                                                                        name="attachments[{{ $index }}][placeholder]"
                                                                        class="form-control"
                                                                        value="{{ $attachment->placeholder }}"
                                                                        placeholder="نص مساعد للمستخدم">
                                                                </div>
                                                            </div>

                                                            <div class="row mt-3">
                                                                <div class="col-md-6">
                                                                    <label class="form-label">نوع الحقل</label>
                                                                    <select
                                                                        name="attachments[{{ $index }}][input_type]"
                                                                        class="form-control"
                                                                        onchange="handleInputTypeChange({{ $index }})"
                                                                        required>
                                                                        <option value="">اختر نوع الحقل</option>
                                                                        <option value="text"
                                                                            {{ $attachment->input_type == 'text' ? 'selected' : '' }}>
                                                                            نص</option>
                                                                        <option value="number"
                                                                            {{ $attachment->input_type == 'number' ? 'selected' : '' }}>
                                                                            رقم</option>
                                                                        <option value="select"
                                                                            {{ $attachment->input_type == 'select' ? 'selected' : '' }}>
                                                                            قائمة اختيار</option>
                                                                        <option value="file"
                                                                            {{ $attachment->input_type == 'file' ? 'selected' : '' }}>
                                                                            ملف</option>
                                                                    </select>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label class="form-label">مطلوب</label>
                                                                    <select
                                                                        name="attachments[{{ $index }}][is_required]"
                                                                        class="form-control">
                                                                        <option value="1"
                                                                            {{ $attachment->is_required ? 'selected' : '' }}>
                                                                            نعم</option>
                                                                        <option value="0"
                                                                            {{ !$attachment->is_required ? 'selected' : '' }}>
                                                                            لا</option>
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <div class="row mt-3">
                                                                <div class="col-md-6">
                                                                    <label class="form-label">الترتيب</label>
                                                                    <input type="number"
                                                                        name="attachments[{{ $index }}][order]"
                                                                        class="form-control"
                                                                        value="{{ $attachment->order }}" min="1">
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label class="form-label">حالة الحقل</label>
                                                                    <select
                                                                        name="attachments[{{ $index }}][is_active]"
                                                                        class="form-control">
                                                                        <option value="1"
                                                                            {{ $attachment->is_active ? 'selected' : '' }}>
                                                                            نشط</option>
                                                                        <option value="0"
                                                                            {{ !$attachment->is_active ? 'selected' : '' }}>
                                                                            غير نشط</option>
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <div class="row mt-3" id="min-max-fields-{{ $index }}"
                                                                style="display: {{ in_array($attachment->input_type, ['text', 'number']) ? 'block' : 'none' }};">
                                                                <div class="col-md-6">
                                                                    <label class="form-label">الحد الأدنى</label>
                                                                    <input type="number"
                                                                        name="attachments[{{ $index }}][min]"
                                                                        class="form-control"
                                                                        value="{{ $attachment->min }}">
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <label class="form-label">الحد الأقصى</label>
                                                                    <input type="number"
                                                                        name="attachments[{{ $index }}][max]"
                                                                        class="form-control"
                                                                        value="{{ $attachment->max }}">
                                                                </div>
                                                            </div>

                                                            <div class="row mt-3" id="options-field-{{ $index }}"
                                                                style="display: {{ $attachment->input_type == 'select' ? 'block' : 'none' }};">
                                                                <div class="col-md-12">
                                                                    <label class="form-label">خيارات القائمة (كل خيار في
                                                                        سطر منفصل)</label>
                                                                    <textarea name="attachments[{{ $index }}][options]" class="form-control" rows="3"
                                                                        placeholder="الخيار الأول
الخيار الثاني
الخيار الثالث">{{ is_array($attachment->options) ? implode("\n", $attachment->options) : '' }}</textarea>
                                                                </div>
                                                            </div>

                                                            <div class="row mt-3">
                                                                <div class="col-md-6">
                                                                    <label class="form-label">حالة الحقل</label>
                                                                    <select
                                                                        name="attachments[{{ $index }}][is_active]"
                                                                        class="form-control">
                                                                        <option value="1"
                                                                            {{ $attachment->is_active ? 'selected' : '' }}>
                                                                            نشط</option>
                                                                        <option value="0"
                                                                            {{ !$attachment->is_active ? 'selected' : '' }}>
                                                                            غير نشط</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <button type="submit" class="btn btn-primary mt-3 mb-0"> حفظ</button>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- row closed -->
        </div>
        <!-- Container closed -->
    </div>
    <!-- main-content closed -->
@endsection
@section('js')
    @include('admin.helper.formscripts')
    @include('vue')
    <script>
        $(function() {
            $('#newjob').on('submit', function(e) {
                e.preventDefault();

                let formData = new FormData(document.getElementById('newjob'));
                const content = tinymce.get('elm1').getContent();
                formData.append('note', content);
                adawe(`{{ route('admin.chargeMethod.update') }}`, formData);
            });
        });

        // Attachment Management Functions
        let attachmentIndex = {{ count($agent->attachments) }};

        function addAttachment() {
            const container = document.getElementById('attachments-container');
            const attachmentDiv = document.createElement('div');
            attachmentDiv.className = 'attachment-item border p-3 mb-3 rounded position-relative';
            attachmentDiv.id = `attachment-${attachmentIndex}`;

            attachmentDiv.innerHTML = `
                <button type="button" onclick="removeAttachment(${attachmentIndex})" class="btn btn-danger btn-sm position-absolute" style="top: 10px; left: 10px;">
                    <x-lucide-trash-2 width="20" height="20" />
                </button>
                
                <div class="row">
                    <div class="col-md-6">
                        <label class="form-label">اسم الحقل</label>
                        <input type="text" name="attachments[${attachmentIndex}][name]" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">النص المساعد (Placeholder)</label>
                        <input type="text" name="attachments[${attachmentIndex}][placeholder]" class="form-control" placeholder="نص مساعد للمستخدم">
                    </div>
                </div>
                
                <div class="row mt-3">
                    <div class="col-md-6">
                        <label class="form-label">نوع الحقل</label>
                        <select name="attachments[${attachmentIndex}][input_type]" class="form-control" onchange="handleInputTypeChange(${attachmentIndex})" required>
                            <option value="">اختر نوع الحقل</option>
                            <option value="text">نص</option>
                            <option value="number">رقم</option>
                            <option value="select">قائمة اختيار</option>
                            <option value="file">ملف</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">مطلوب</label>
                        <select name="attachments[${attachmentIndex}][is_required]" class="form-control">
                            <option value="1">نعم</option>
                            <option value="0">لا</option>
                        </select>
                    </div>
                </div>
                
                <div class="row mt-3">
                    <div class="col-md-6">
                        <label class="form-label">الترتيب</label>
                        <input type="number" name="attachments[${attachmentIndex}][order]" class="form-control" value="1" min="1">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">حالة الحقل</label>
                        <select name="attachments[${attachmentIndex}][is_active]" class="form-control">
                            <option value="1">نشط</option>
                            <option value="0">غير نشط</option>
                        </select>
                    </div>
                </div>
                
                <div class="row mt-3" id="min-max-fields-${attachmentIndex}" style="display: none;">
                    <div class="col-md-6">
                        <label class="form-label">الحد الأدنى</label>
                        <input type="number" name="attachments[${attachmentIndex}][min]" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">الحد الأقصى</label>
                        <input type="number" name="attachments[${attachmentIndex}][max]" class="form-control">
                    </div>
                </div>
                
                <div class="row mt-3" id="options-field-${attachmentIndex}" style="display: none;">
                    <div class="col-md-12">
                        <label class="form-label">خيارات القائمة (كل خيار في سطر منفصل)</label>
                        <textarea name="attachments[${attachmentIndex}][options]" class="form-control" rows="3" placeholder="الخيار الأول
الخيار الثاني
الخيار الثالث"></textarea>
                    </div>
                </div>
            `;

            container.appendChild(attachmentDiv);
            attachmentIndex++;
        }

        function removeAttachment(index) {
            const attachmentDiv = document.getElementById(`attachment-${index}`);
            if (attachmentDiv) {
                attachmentDiv.remove();
            }
        }

        function handleInputTypeChange(index) {
            const selectElement = document.querySelector(`select[name="attachments[${index}][input_type]"]`);
            const minMaxFields = document.getElementById(`min-max-fields-${index}`);
            const optionsField = document.getElementById(`options-field-${index}`);

            // Hide all conditional fields first
            minMaxFields.style.display = 'none';
            optionsField.style.display = 'none';

            // Show relevant fields based on input type
            if (selectElement.value === 'text' || selectElement.value === 'number') {
                minMaxFields.style.display = 'block';
            } else if (selectElement.value === 'select') {
                optionsField.style.display = 'block';
            }
        }

        // Rotating Titles Management Functions
        let rotatingTitleIndex = {{ count($agent->rotating_titles ?? []) }};

        function addRotatingTitle() {
            const container = document.getElementById('rotating-titles-container');
            const titleDiv = document.createElement('div');
            titleDiv.className = 'rotating-title-item input-group mb-2';
            titleDiv.id = `rotating-title-${rotatingTitleIndex}`;

            titleDiv.innerHTML = `
                <input type="text" name="rotating_titles[]" class="form-control" placeholder="أدخل العنوان">
                <button type="button" class="btn btn-danger" onclick="removeRotatingTitle(${rotatingTitleIndex})">
                    <x-lucide-trash-2 width="20" height="20" />
                </button>
            `;

            container.appendChild(titleDiv);
            rotatingTitleIndex++;
        }

        function removeRotatingTitle(index) {
            const titleDiv = document.getElementById(`rotating-title-${index}`);
            if (titleDiv) {
                titleDiv.remove();
            }
        }
    </script>
@endsection