@extends('admin.layouts.master')

@section('css')
    {{-- Shared form styles (Select2, basic form styling) --}}
    @include('admin.helper.formscss')
    {{-- File upload specific styles (kept locally) --}}
    <link href="{{ vasset('assets/plugins/fileuploads/css/fileupload.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ vasset('assets/plugins/fancyuploder/fancy_fileupload.css') }}" rel="stylesheet" />
@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"> تعديل إعدادات موقع خارجي: {{ $externalSite->name }} </h4>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection

@section('content')
    <div id='pageid'>
        <div>
            <div class="row">
                <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
                    <form id='editext' enctype="multipart/form-data">
                        @csrf
                        <input class="form-control" name="id" value="{{ $externalSite->id }}" type="hidden">
                        <div class="card">
                            <div class="card-body">
                                <div class="row row-sm">
                                    <!-- Basic Information -->
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> اسم الموقع </label>
                                        <input required name="name" class="form-control"
                                            value="{{ $externalSite->name }}" type="text">
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> نوع الموقع <span class="text-danger">*</span> </label>
                                        <select required name="type" class="form-control">
                                            <option value="">اختر نوع الموقع</option>
                                            <option value="site" {{ $externalSite->type == 'site' ? 'selected' : '' }}>
                                                موقع</option>
                                            <option value="script" {{ $externalSite->type == 'script' ? 'selected' : '' }}>
                                                سكريبت</option>
                                            <option value="internalScript"
                                                {{ $externalSite->type == 'internalScript' ? 'selected' : '' }}>سكريبت
                                                داخلي</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> حالة الموقع </label>
                                        <select name="is_active" class="form-control">
                                            <option value="1" {{ $externalSite->is_active ? 'selected' : '' }}>نشط
                                            </option>
                                            <option value="0" {{ !$externalSite->is_active ? 'selected' : '' }}>غير نشط
                                            </option>
                                        </select>
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> اسم المدير </label>
                                        <input required name="admin_name" class="form-control"
                                            value="{{ $externalSite->admin_name }}" type="text">
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> API URL </label>
                                        <input required name="api_url" class="form-control"
                                            value="{{ $externalSite->api_url }}" type="text"
                                            placeholder="https://api.example.com/v1">
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Token </label>
                                        <input name="token" class="form-control" value="{{ $externalSite->token }}"
                                            type="text">
                                    </div>
                                </div>

                                <hr class="mt-4 mb-4">

                                <!-- Endpoints Configuration -->
                                <div class="row row-sm">
                                    <div class="col-12">
                                        <h5 class="text-primary mb-3"> إعدادات نقاط النهاية (Endpoints) </h5>
                                    </div>

                                    <!-- Products Endpoint -->
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Products Endpoint </label>
                                        <input required name="products_endpoint" class="form-control"
                                            value="{{ $externalSite->products_endpoint }}" type="text"
                                            placeholder="products">
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Products Method </label>
                                        <select name="products_http_method" class="form-control">
                                            <option value="GET"
                                                {{ $externalSite->products_http_method == 'GET' ? 'selected' : '' }}>GET
                                            </option>
                                            <option value="POST"
                                                {{ $externalSite->products_http_method == 'POST' ? 'selected' : '' }}>POST
                                            </option>
                                        </select>
                                    </div>

                                    <!-- Order Endpoint -->
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Order Endpoint </label>
                                        <input required name="order_endpoint" class="form-control"
                                            value="{{ $externalSite->order_endpoint }}" type="text"
                                            placeholder="orders">
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Order Method </label>
                                        <select name="order_http_method" class="form-control">
                                            <option value="GET"
                                                {{ $externalSite->order_http_method == 'GET' ? 'selected' : '' }}>GET
                                            </option>
                                            <option value="POST"
                                                {{ $externalSite->order_http_method == 'POST' ? 'selected' : '' }}>POST
                                            </option>
                                        </select>
                                    </div>

                                    <!-- Status Endpoint -->
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Status Endpoint (للاستعلام عن الأوردر) </label>
                                        <input required name="status_endpoint" class="form-control"
                                            value="{{ $externalSite->status_endpoint }}" type="text"
                                            placeholder="status">
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Status Method </label>
                                        <select name="status_http_method" class="form-control">
                                            <option value="GET"
                                                {{ $externalSite->status_http_method == 'GET' ? 'selected' : '' }}>GET
                                            </option>
                                            <option value="POST"
                                                {{ $externalSite->status_http_method == 'POST' ? 'selected' : '' }}>POST
                                            </option>
                                        </select>
                                    </div>

                                    <!-- Balance Endpoint -->
                                    <div class="col-12 mt-4">
                                        <h5 class="text-primary mb-1"> إعدادات رصيد الموقع (اختياري) </h5>
                                        <p class="text-muted small mb-0">لن يتم تحديث الرصيد إلا إذا قمت بتحديد كل من نقطة
                                            النهاية ومفتاح القاعدة.</p>
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <label class="form-label"> Balance Endpoint </label>
                                        <input name="balance_endpoint" class="form-control"
                                            value="{{ $externalSite->balance_endpoint }}" type="text"
                                            placeholder="balance">
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="form-label"> Balance Method </label>
                                        <select name="balance_http_method" class="form-control">
                                            <option value=""
                                                {{ $externalSite->balance_http_method ? '' : 'selected' }}>
                                                اختر</option>
                                            <option value="GET"
                                                {{ $externalSite->balance_http_method == 'GET' ? 'selected' : '' }}>GET
                                            </option>
                                            <option value="POST"
                                                {{ $externalSite->balance_http_method == 'POST' ? 'selected' : '' }}>POST
                                            </option>
                                        </select>
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="form-label"> مفتاح القاعدة (config/site_rules.php) </label>
                                        <input name="balance_rule" class="form-control"
                                            value="{{ $externalSite->balance_rule }}" type="text"
                                            placeholder="مثال: default">
                                    </div>
                                </div>

                                <hr class="mt-4 mb-4">

                                <!-- Headers Configuration -->
                                <div class="row row-sm">
                                    <div class="col-12">
                                        <h5 class="text-primary mb-3"> إعدادات Headers </h5>
                                        <div class="alert alert-info">
                                            <strong>ملاحظة:</strong> يمكنك استخدام %token% في القيم وسيتم استبدالها بالتوكن
                                            الفعلي.
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div id="headers-container">
                                            @if ($externalSite->headers)
                                                @foreach ($externalSite->headers as $key => $value)
                                                    <div class="row header-row mb-2">
                                                        <div class="col-5">
                                                            <input type="text" name="headers[{{ $key }}]"
                                                                value="{{ $key }}" placeholder="Header Key"
                                                                class="form-control header-key">
                                                        </div>
                                                        <div class="col-5">
                                                            <input type="text" name="headers[{{ $key }}]"
                                                                value="{{ $value }}" placeholder="Header Value"
                                                                class="form-control header-value">
                                                        </div>
                                                        <div class="col-2">
                                                            <button type="button"
                                                                class="btn btn-danger btn-sm remove-header">
                                                                <x-lucide-trash-2 width="20" height="20" />
                                                            </button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                        <button type="button" class="btn btn-success btn-sm" id="add-header">
                                            <x-lucide-plus width="20" height="20" /> إضافة Header
                                        </button>
                                    </div>
                                </div>

                                <div class="text-center mt-4">
                                    <button type="submit" @click="savecat" class="col-4 btn btn-primary mt-3 mb-0">
                                        <x-lucide-save width="20" height="20" /> حفظ التعديلات
                                    </button>
                                    <a href="{{ route('admin.external-sites.index') }}"
                                        class="col-4 btn btn-secondary mt-3 mb-0">
                                        <x-lucide-arrow-left width="20" height="20" /> رجوع
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('vue')
    {{-- Light form scripts only (no DataTables needed) --}}
    @include('admin.helper.formscripts')
    <script>
        $(function() {
            $('#editext').on('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(document.getElementById('editext'));

                // Collect headers data
                let headersData = {};
                $('.header-row').each(function() {
                    let key = $(this).find('.header-key').val();
                    let value = $(this).find('.header-value').val();
                    if (key && value) {
                        headersData[key] = value;
                    }
                });

                // Add headers to formData
                formData.append('headersData', JSON.stringify(headersData));

                adawe('{{ route('admin.external-sites.update') }}', formData)
            });

            // Add header functionality
            $('#add-header').on('click', function() {
                const headerRow = `
                    <div class="row header-row mb-2">
                        <div class="col-5">
                            <input type="text" placeholder="Header Key" class="form-control header-key">
                        </div>
                        <div class="col-5">
                            <input type="text" placeholder="Header Value" class="form-control header-value">
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn btn-danger btn-sm remove-header">
                                <x-lucide-trash-2 width="20" height="20" />
                            </button>
                        </div>
                    </div>
                `;
                $('#headers-container').append(headerRow);
            });

            // Remove header functionality
            $(document).on('click', '.remove-header', function() {
                $(this).closest('.header-row').remove();
            });
        });

        $(function() {
            $('.select2').select2()
        });
    </script>
@endsection