@extends('layouts.master')
@section('title', 'إضافة عرض')

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    {{-- <style>
        .shell {
            background: #0f1e2b;
            border-radius: 14px;
            padding: 14px
        }

        .block {
            background: #0b1621;
            border: 1px solid #203446;
            border-radius: 12px;
            padding: 12px
        }

        .muted {
            opacity: .8
        }

        .badge-soft {
            background: #13283a;
            border: 1px solid #254a65;
            border-radius: 999px;
            padding: 2px 10px;
            color: #d6f0ff
        }

        .table-offer th,
        .table-offer td {
            vertical-align: middle
        }

        .side-panel {
            min-height: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .btn-circle {
            width: 38px;
            height: 38px;
            border-radius: 50%
        }

        .disabled-wrap {
            opacity: .55;
            pointer-events: none;
            filter: grayscale(.3)
        }

        .svc-name {
            white-space: normal;
            line-height: 1.35
        }

        .svc-meta {
            font-size: .85rem;
            opacity: .85
        }

        .select2-container--default .select2-selection--multiple {
            background-color: #000 !important;
            border: 1px solid #444;
            color: #fff;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            color: #fff;
        }

        .select2-container--default .select2-selection__choice {
            background-color: #222 !important;
            border: 1px solid #555;
            color: #ff4d4d !important;
        }

        .select2-container--default .select2-selection__choice__remove {
            color: #ff4d4d !important;
        }

        .select2-dropdown {
            background-color: #000 !important;
            color: #fff;
        }

        .select2-results__option {
            background-color: #000;
            color: #fff;
        }

        .select2-results__option--highlighted {
            background-color: #0d6efd !important;
            color: #fff !important;
        }
    </style> --}}
@endsection

@section('content')
    <div class="container-fluid">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('offers.store') }}" method="POST" id="offerForm">
            @csrf

            <div class="d-flex align-items-center justify-content-between mb-3">
                <h2 class="mb-0">إضافة عرض رقم : <strong class="text-danger bold">{{ $nextNo }}</strong></h2>
                <div class="d-flex gap-2">
                    <button class="btn btn-primary"><i class="fas fa-save me-2"></i>حفظ</button>
                    <a href="{{ route('offers.index') }}" class="btn btn-secondary">رجوع</a>
                </div>
            </div>

            <div class="row g-3">
                <div class="col-lg-8">
                    <div class="shell">
                        <div class="row g-3">

                            <div class="col-md-6">
                                <div class="block">
                                    <label class="form-label">اسم العرض (ar) <span class="text-danger">*</span></label>
                                    <input type="text" name="name[ar]" class="form-control" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="block">
                                    <label class="form-label">اسم العرض (en) <span class="text-danger">*</span></label>
                                    <input type="text" name="name[en]" class="form-control" required>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="card shadow-sm">
                                    <div class="card-header  fw-bold text-center">
                                        <i class="fas fa-broadcast-tower me-1 text-success"></i> حالة العرض
                                    </div>

                                    <div class="card-body text-center">
                                        <div class="form-check form-switch d-inline-flex align-items-center gap-3">
                                            <input class="form-check-input fs-4" type="checkbox" id="is_live_toggle"
                                                checked>

                                            <label class="fw-bold mb-0" id="is_live_label">
                                                <span class="badge bg-success px-3 py-2">
                                                    <i class="fas fa-eye"></i> Live
                                                </span>
                                            </label>
                                        </div>

                                        <input type="hidden" name="is_live" id="is_live" value="1">

                                        <div class="form-text text-muted mt-2">
                                            عند إيقاف Live لن يظهر العرض للمستخدمين
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="card shadow-sm">
                                    <div class="card-header  fw-bold text-center">
                                        <i class="fas fa-bullseye me-1 text-primary "></i> الفئة المستهدفة
                                    </div>

                                    <div class="card-body">
                                        <div class="d-flex flex-wrap gap-4 mb-4 justify-content-around">
                                            <div class="form-check">
                                                <input class="form-check-input scope-check" type="checkbox" id="chk_members"
                                                    value="members" name="scope">
                                                <label class="form-check-label fw-semibold" for="chk_members">
                                                    <i class="fas fa-users text-primary me-1"></i> الأعضاء
                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input scope-check" type="checkbox"
                                                    id="chk_customers" value="customers" name="scope">
                                                <label class="form-check-label fw-semibold" for="chk_customers">
                                                    <i class="fas fa-user-tie text-success me-1"></i> العملاء
                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input scope-check" type="checkbox" id="chk_coupons"
                                                    value="coupons" name="scope">
                                                <label class="form-check-label fw-semibold" for="chk_coupons">
                                                    <i class="fas fa-ticket-alt text-warning me-1"></i> كوبونات
                                                </label>
                                            </div>
                                        </div>

                                        <div id="box_members" class="d-none"></div>

                                        <div id="box_customers" class="d-none text-center">
                                            <button type="button" class="btn btn-outline-success mb-3"
                                                data-bs-toggle="modal" data-bs-target="#customerModal">
                                                <i class="fas fa-user-plus mx-1"></i> اختيار العميل
                                            </button>

                                            <div id="selectedCustomerBox"
                                                class="alert alert-light border text-muted small d-none">
                                                <i class="fas fa-user"></i> <span id="selectedCustomerName"></span>
                                            </div>
                                        </div>

                                        <div id="box_coupons" class="d-none">
                                            <label class="form-label fw-bold">أكواد الكوبونات</label>
                                            <input type="text" class="form-control" id="coupon_inline"
                                                name="coupon_inline" placeholder="ABC123, XYZ50"
                                                value="{{ old('coupon_inline', '') }}">
                                            <div class="form-text text-muted">اكتب الأكواد مفصولة بفواصل (،)</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal fade" id="customerModal" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header bg-success text-white">
                                            <h5 class="modal-title"><i class="fas fa-user-check me-1"></i> اختيار العميل
                                            </h5>
                                            <button type="button" class="btn-close btn-close-white"
                                                data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body">
                                            <label class="form-label fw-bold">ابحث عن العميل:</label>
                                            <select class="form-select" id="customer_select_modal" style="width: 100%">
                                                <option value="">— اختر العميل —</option>
                                                @foreach ($customers as $c)
                                                    <option value="{{ $c->id }}">{{ $c->name }} —
                                                        {{ $c->customer_code ?? $c->id }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-success"
                                                id="saveSelectedCustomer">تأكيد الاختيار</button>
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">إغلاق</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- <input type="hidden" name="target_customer_ids[]" id="target_customer_id"> --}}

                            <input type="hidden" id="target_customer_id" disabled>

                            <div class="col-md-12">
                                <div class="block">
                                    <div class="row g-3 align-items-end">
                                        <div class="col-md-6">
                                            <label class="form-label">تاريخ البداية (ميلادي)</label>
                                            <input type="date" class="form-control" name="start_date_g"
                                                id="start_g" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">تاريخ النهاية (ميلادي)</label>
                                            <input type="date" class="form-control" name="end_date_g" id="end_g"
                                                required>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">تاريخ البداية (هجري)</label>
                                            <input type="text" class="form-control" name="start_date_h"
                                                id="start_h" readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">تاريخ النهاية (هجري)</label>
                                            <input type="text" class="form-control" name="end_date_h" id="end_h"
                                                readonly>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">المدّة (أيام)</label>
                                            <input type="text" class="form-control" id="duration_days" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="shell side-panel">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label">الخصم العام</label>
                                <div class="input-group">
                                    <select class="form-select" name="discount_type" id="g_discount_type"
                                        style="max-width:110px">
                                        <option value="percent" selected>%</option>
                                        <option value="amount">مبلغ</option>
                                    </select>
                                    <input type="number" step="0.01" min="0" class="form-control"
                                        name="discount_value" id="g_discount_value" placeholder="0">
                                </div>
                            </div>

                            <div class="col-md-12">
                                <label class="form-label">أيام إضافية (لكل خدمة)</label>
                                <input type="number" class="form-control" name="extra_days" id="g_extra_days"
                                    min="0" placeholder="0">
                            </div>

                            <div class="col-md-12">
                                <label class="form-label">عدد أيام الإيقاف</label>
                                <input type="number" class="form-control" id="g_stop_days" min="0"
                                    placeholder="0">
                            </div>

                            <div class="col-md-12">
                                <label class="form-label">عدد مرات الإيقاف</label>
                                <input type="number" class="form-control" id="g_stop_times" min="0"
                                    placeholder="0">
                            </div>

                            <div class="col-md-12">
                                <label class="form-label fw-bold">الخدمات</label>
                                <button type="button" class="btn btn-outline-primary w-100" id="openServicesModal">
                                    <i class="fas fa-list me-1"></i> اختيار الخدمات
                                </button>

                                <div id="selectedServicesBox" class="alert mt-2 d-none small text-center">
                                    <strong>الخدمات المختارة:</strong>
                                    <div id="selectedServicesNames" class="fw-semibold text-dark mt-1"></div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <button type="button" class="btn btn-success w-100" id="addServiceBtn">
                                    <i class="fas fa-plus me-1"></i> إضافة الخدمات المحددة
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 mt-3">
                    <div class="block">
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered text-center align-middle" id="itemsTable">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>الخدمة</th>
                                        <th>السعر الأساسي</th>
                                        <th>السعر بعد الخصم</th>
                                        <th>المدة الأصلية</th>
                                        <th>المدة الإضافية</th>
                                        <th>المدة النهائية</th>
                                        <th>أيام الإيقاف</th>
                                        <th>مرات الإيقاف</th>
                                        <th>حذف</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="itemsHidden"></div>

                <div class="modal fade" id="servicesModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-lg modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header bg-primary text-white">
                                <h5 class="modal-title"><i class="fas fa-list-check me-2"></i> اختيار الخدمات</h5>
                                <button type="button" class="btn-close btn-close-white"
                                    data-bs-dismiss="modal"></button>
                            </div>

                            <div class="modal-body">
                                <select class="form-select form-control service_select" id="services_select_modal"
                                    multiple style="width:100%">
                                    @foreach ($services as $s)
                                        <option value="{{ $s->id }}" data-price="{{ $s->price }}"
                                            data-duration-value="{{ $s->duration_value }}"
                                            data-duration-unit="{{ $s->duration_unit }}">
                                            {{ $s->getTranslation('name', app()->getLocale()) }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="form-text text-muted mt-2">يمكنك البحث واختيار أكثر من خدمة.</div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-success" id="saveSelectedServices">تأكيد</button>
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                            </div>
                        </div>
                    </div>
                </div>

                <input type="hidden" name="selected_service_ids" id="selected_service_ids">
            </div>
        </form>
    </div>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment-hijri@2.2.0/moment-hijri.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            const checkboxes = $('.scope-check');
            const boxes = {
                members: $('#box_members'),
                customers: $('#box_customers'),
                coupons: $('#box_coupons')
            };
            const selectedCustomerBox = $('#selectedCustomerBox');
            const selectedCustomerName = $('#selectedCustomerName');
            const targetCustomerInput = $('#target_customer_id');

            function toggleScope(target) {
                checkboxes.prop('checked', false);
                target.prop('checked', true);

                $.each(boxes, function(_, el) {
                    el.addClass('d-none');
                });

                targetCustomerInput
                    .val('')
                    .removeAttr('name')
                    .prop('disabled', true);

                selectedCustomerBox.addClass('d-none');
                selectedCustomerName.text('');
                $('#coupon_inline').val('');

                const scope = target.val();
                if (boxes[scope]) boxes[scope].removeClass('d-none');
            }

            checkboxes.on('change', function() {
                toggleScope($(this));
            });

            $('#customer_select_modal').select2({
                dropdownParent: $('#customerModal'),
                width: '100%',
                placeholder: 'ابحث عن العميل...',
                allowClear: true,
                language: {
                    noResults: () => 'لا توجد نتائج',
                    searching: () => 'جارٍ البحث...'
                }
            });

            $('#saveSelectedCustomer').click(function() {
                const selected = $('#customer_select_modal').find(':selected');
                const id = selected.val();
                const name = selected.text();

                if (!id) {
                    alert('من فضلك اختر العميل أولاً');
                    return;
                }

                $('#target_customer_id')
                    .val(id)
                    .attr('name', 'target_customer_ids[]')
                    .prop('disabled', false);

                $('#selectedCustomerName').text(name);
                $('#selectedCustomerBox').removeClass('d-none');

                bootstrap.Modal.getInstance(document.getElementById('customerModal')).hide();
            });

            $('#start_g').on('change', function() {
                const start = $(this).val();
                if (start) {
                    $('#end_g').attr('min', start);
                }
            });

            function gToH(iso) {
                if (!iso) return '';
                try {
                    const m = moment(iso, 'YYYY-MM-DD', true);
                    if (!m.isValid() || typeof m.iYear !== 'function') {
                        return convertWithIntl(iso);
                    }
                    return m.iFormat('iYYYY-iMM-iDD');
                } catch (err) {
                    return convertWithIntl(iso);
                }
            }

            function convertWithIntl(iso) {
                try {
                    const dt = new Date(iso + 'T00:00:00');
                    const fmt = new Intl.DateTimeFormat('en-u-ca-islamic', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit'
                    });
                    const parts = fmt.formatToParts(dt);
                    const y = parts.find(p => p.type === 'year').value;
                    const m = parts.find(p => p.type === 'month').value;
                    const d = parts.find(p => p.type === 'day').value;
                    return `${y}-${m}-${d}`;
                } catch {
                    return '';
                }
            }

            function refreshDates() {
                const s = $('#start_g').val();
                const e = $('#end_g').val();

                $('#start_h').val(gToH(s));
                $('#end_h').val(gToH(e));

                if (s && e) {
                    const diff = moment(e).diff(moment(s), 'days') + 1;
                    $('#duration_days').val(diff > 0 ? diff : 0);
                } else {
                    $('#duration_days').val('');
                }
            }

            $('#start_g, #end_g').on('change', refreshDates);
            refreshDates();

            $('#services_select_modal').select2({
                dropdownParent: $('#servicesModal'),
                width: '100%',
                placeholder: 'اختر الخدمات...',
                language: {
                    noResults: () => 'لا توجد نتائج',
                    searching: () => 'جارٍ البحث...'
                }
            });

            $('#openServicesModal').click(() => $('#servicesModal').modal('show'));

            $('#saveSelectedServices').click(function() {
                const selected = $('#services_select_modal').find(':selected');

                if (selected.length === 0) {
                    alert('يرجى اختيار خدمة واحدة على الأقل');
                    return;
                }

                const ids = [];
                const names = [];

                selected.each(function() {
                    ids.push($(this).val());
                    names.push($(this).text());
                });

                $('#selected_service_ids').val(ids.join(','));

                $('#selectedServicesNames').html(
                    names.map(n => `<span class="badge bg-primary mx-1">${n}</span>`).join('')
                );

                $('#selectedServicesBox').removeClass('d-none');
                $('#servicesModal').modal('hide');
            });

            function durationToDays(value, unit) {
                value = parseInt(value) || 0;

                switch (unit) {
                    case 'days':
                        return value;

                    case 'months':
                        return Math.round(value * 30.416);
                        // متوسط الشهر الحقيقي

                    case 'years':
                        return value * 365;

                    default:
                        return value;
                }
            }

            function unitText(unit) {
                switch (unit) {
                    case 'days':
                        return 'يوم';
                    case 'months':
                        return 'شهر';
                    case 'years':
                        return 'سنة';
                    default:
                        return unit;
                }
            }

            function durationLabel(value, unit) {
                return `${value} ${unitText(unit)}`;
            }

            $('#addServiceBtn').click(function() {
                const discountType = $('#g_discount_type').val();
                const discountValue = parseFloat($('#g_discount_value').val()) || 0;
                const extraDays = parseInt($('#g_extra_days').val()) || 0;
                const stopDays = parseInt($('#g_stop_days').val()) || 0;
                const stopTimes = parseInt($('#g_stop_times').val()) || 0;

                const tbody = $('#itemsTable tbody');
                const hiddenBox = $('#itemsHidden');

                let index = $('#itemsHidden input[name$="[service_id]"]').length;

                $('#services_select_modal').find(':selected').each(function() {
                    const id = $(this).val();
                    const name = $(this).text();
                    const price = parseFloat($(this).data('price')) || 0;
                    const durationValue = parseInt($(this).data('duration-value')) || 0;
                    const durationUnit = $(this).data('duration-unit') || 'days';

                    if (tbody.find(`tr[data-service-id="${id}"]`).length) {
                        return;
                    }

                    const finalPrice = discountType === 'percent' ?
                        price - (price * discountValue / 100) :
                        Math.max(0, price - discountValue);

                    const baseDurationDays = durationToDays(durationValue, durationUnit);

                    const finalDurationDays = baseDurationDays + extraDays;

                    tbody.append(`
                        <tr data-index="${index}" data-service-id="${id}">
                            <td>${index + 1}</td>
                            <td>${name}</td>
                            <td>${price.toFixed(2)}</td>
                            <td>${finalPrice.toFixed(2)}</td>
                            <td>${durationLabel(durationValue, durationUnit)}</td>
                            <td>${extraDays} يوم</td>
                            <td>${finalDurationDays} يوم</td>
                            <td>${stopDays}</td>
                            <td>${stopTimes}</td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm removeService">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                    `);

                    hiddenBox.append(`
                        <input type="hidden" name="items[${index}][service_id]" value="${id}">
                        <input type="hidden" name="items[${index}][stop_days]" value="${stopDays}">
                        <input type="hidden" name="items[${index}][stop_times]" value="${stopTimes}">
                    `);

                    index++;
                });
            });

            $(document).on('click', '.removeService', function() {
                const row = $(this).closest('tr');
                const index = row.data('index');

                row.remove();
                $('#itemsHidden').find(`input[name^="items[${index}]"]`).remove();

                $('#itemsTable tbody tr').each(function(i) {
                    $(this).find('td:first').text(i + 1);
                });
            });

            $('form').on('submit', function(e) {
                const scope = $('.scope-check:checked').val();
                const customerId = $('#target_customer_id').val();
                const itemsCount = $('#itemsHidden input[name$="[service_id]"]').length;
                const startDate = $('#start_g').val();
                const endDate = $('#end_g').val();

                if (!scope) return e.preventDefault(), alert('اختر الفئة المستهدفة أولاً.');
                if (scope === 'customers' && !customerId) {
                    return e.preventDefault(), alert('اختر عميل واحد قبل الحفظ.');
                }
                if (itemsCount === 0) {
                    return e.preventDefault(), alert('أضف خدمة واحدة على الأقل.');
                }
                if (!startDate || !endDate) {
                    return e.preventDefault(), alert('أدخل تاريخ البداية والنهاية.');
                }
                if (moment(endDate).isBefore(moment(startDate))) {
                    return e.preventDefault(), alert('تاريخ النهاية لا يمكن أن يسبق البداية.');
                }

                const couponInline = $('#coupon_inline').val().trim();
                if (scope === 'coupons' && !couponInline) {
                    return e.preventDefault(), alert('أدخل كوبون واحد على الأقل.');
                }
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const toggle = document.getElementById('is_live_toggle');
            const hiddenInput = document.getElementById('is_live');
            const label = document.getElementById('is_live_label');

            function updateLiveUI(isLive) {
                if (isLive) {
                    hiddenInput.value = 1;
                    label.innerHTML = `
                        <span class="badge bg-success px-3 py-2">
                            <i class="fas fa-eye"></i> Live
                        </span>`;
                } else {
                    hiddenInput.value = 0;
                    label.innerHTML = `
                        <span class="badge bg-secondary px-3 py-2">
                            <i class="fas fa-eye-slash"></i> Hidden
                        </span>`;
                }
            }

            updateLiveUI(true);

            toggle.addEventListener('change', function() {
                updateLiveUI(this.checked);
            });
        });


        function diff360(start, end) {
            const s = moment(start);
            const e = moment(end);

            let y = e.year() - s.year();
            let m = e.month() - s.month();
            let d = e.date() - s.date();

            return (y * 360) + (m * 30) + d + 1;
        }
    </script>
@endsection