@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">
                                <div class="card-body">
                                    <div class="main-content-label mg-b-5">
                                        بيانات طريقة شحن
                                    </div>
                                    <div class="row row-sm">


                                        {{-- <div class="col-lg-4 mt-3">
                                            <label class="form-label">الإسم</label>
                                            <input required class="form-control" value="" name="name"
                                                placeholder="" type="text">
                                        </div> --}}
                                        <x-admin.form.input name="name" label="الإسم" col="4" required />
                                        <x-admin.form.input name="max" type="float" label="الحد الأقصى" col="4"
                                            required />
                                        <x-admin.form.input name="min" type="float" label="الحد الادنى"
                                            col="4" />
                                        <x-admin.form.input name="image" type="file" label="الصورة" col="4"
                                            required />

                                        <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 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 value="0"> لا يوجد </option>
                                                <option value="1"> خصم </option>
                                                <option value="2"> ضريبه </option>

                                            </select>
                                        </div>
                                        <div class="col-lg-4 mt-3">
                                            <label class="form-label"> النسبة </label>
                                            <input class="form-control" value="" 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" selected>لا</option>
                                                <option value="1">نعم</option>
                                            </select>
                                        </div>
                                        {{-- <div class="col-lg-4 mt-3">
                                            <label class="form-label"> max </label>
                                            <input class="form-control" value="" name="max" placeholder=""
                                                type="float">
                                        </div> --}}


                                        {{-- <div class="col-lg-4 mt-3">
                                            <label class="form-label"> الحد الأدنى </label>
                                            <input class="form-control" value="" 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" selected>مفعل</option>
                                                <option value="0">غير مفعل</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">مفعل
                                                </option>
                                                <option value="0">غير
                                                    مفعل
                                                </option>
                                            </select>
                                        </div>
                                        <div class="col-lg-4 mt-3">
                                            <label class="form-label"> رقم العملية </label>
                                            <select name="hasOperationNumber" class="form-control">
                                                <option value="0" selected>لا</option>
                                                <option value="1">نعم</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-12 mt-3">
                                            <textarea id="elm1" name="note">  </textarea>
                                        </div>

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

                                        <!-- 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 }}">
                                                                {{ $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">
                                                        <!-- Rotating titles will be added here -->
                                                    </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">
                                                        <!-- Attachments will be added here -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

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

                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row">

            </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.store') }}`, formData);
            });
        });

        // Attachment Management Functions
        let attachmentIndex = 0;

        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" class="test-xx" />
                </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 = 0;

        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