@extends('admin.layout')

@section('content')
<div class="tabs">
    <button class="tab active" data-target="#categories">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="m8 7-3 3m0 0 3 3M5 10h11a4 4 0 0 1 4 4v5"/><path stroke-linecap="round" stroke-linejoin="round" d="m8 17-3 3m0 0 3 3M5 20h11a4 4 0 0 0 4-4v-5"/></svg>
        دسته‌بندی‌ها
    </button>
    <button class="tab" data-target="#customers">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19a3 3 0 0 1 3-3h1a3 3 0 0 1 3 3v1M4 19a4 4 0 0 1 4-4h0a4 4 0 0 1 4 4v1"/><circle cx="9" cy="7" r="3"/><path stroke-linecap="round" stroke-linejoin="round" d="M19 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg>
        مشتری‌ها
    </button>
    <button class="tab" data-target="#salons">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4 9a2 2 0 0 1 2-2h4l2-3 2 3h4a2 2 0 0 1 2 2v10a1 1 0 0 1-1 1h-4.5a1.5 1.5 0 0 0-3 0H5a1 1 0 0 1-1-1V9Z"/></svg>
        سالن‌ها
    </button>
    <button class="tab" data-target="#artists">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6.75h.008v.008h-.008zM19.5 6.75h.008v.008H19.5zM4.5 6.75h.008v.008H4.5zM8.25 6.75h.008v.008H8.25z"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 3h18M3 3v12a3 3 0 0 0 3 3h3l3 3 3-3h3a3 3 0 0 0 3-3V3"/></svg>
        آرایشگرها
    </button>
    <button class="tab" data-target="#blog">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4h16v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4Zm4 4h8m-8 4h5"/><path stroke-linecap="round" stroke-linejoin="round" d="M9 20h6"/></svg>
        بلاگ
    </button>
</div>

<div id="admin-message" class="status" style="display:none"></div>

<div id="categories" class="card section">
    <h2>مدیریت دسته‌بندی‌ها</h2>
    <form id="categoryForm">
        <input type="hidden" id="categoryId">
        <label for="categoryName">نام دسته‌بندی</label>
        <input type="text" id="categoryName" required>

        <label for="categoryDescription">توضیحات</label>
        <textarea id="categoryDescription" placeholder="معرفی کوتاه دسته‌بندی"></textarea>

        <label for="categoryIcon">آیکن مرتبط</label>
        <select id="categoryIcon">
            <option value="">انتخاب آیکن</option>
            @foreach ($iconOptions as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
            @endforeach
        </select>

        <button type="submit" class="btn-primary">ذخیره دسته‌بندی</button>
        <button type="button" class="btn-secondary" data-reset="category">انصراف</button>
    </form>

    <table id="categoryTable">
        <thead>
            <tr>
                <th>نام</th>
                <th>توضیحات</th>
                <th>آیکن</th>
                <th>عملیات</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<div id="customers" class="card section" style="display:none">
    <h2>مدیریت مشتری‌ها</h2>
    <form id="customerForm">
        <input type="hidden" id="customerId">
        <label for="customerFirstName">نام</label>
        <input type="text" id="customerFirstName" required>

        <label for="customerLastName">نام خانوادگی</label>
        <input type="text" id="customerLastName" required>

        <label for="customerMobile">شماره تماس</label>
        <input type="tel" id="customerMobile" required>

        <label for="customerType">نوع مشتری</label>
        <select id="customerType" required>
            <option value="artist">مشتری اختصاصی</option>
            <option value="salon">مشتری سالن</option>
        </select>

        <label for="customerArtist">آرایشگر مرتبط</label>
        <select id="customerArtist">
            <option value="">انتخاب آرایشگر</option>
        </select>

        <label for="customerSalon">سالن مرتبط</label>
        <select id="customerSalon">
            <option value="">انتخاب سالن</option>
        </select>

        <button type="submit" class="btn-primary">ذخیره مشتری</button>
        <button type="button" class="btn-secondary" data-reset="customer">انصراف</button>
    </form>

    <table id="customerTable">
        <thead>
            <tr>
                <th>نام و نام خانوادگی</th>
                <th>موبایل</th>
                <th>نوع</th>
                <th>آرایشگر</th>
                <th>سالن</th>
                <th>عملیات</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<div id="salons" class="card section" style="display:none">
    <h2>مدیریت سالن‌ها</h2>
    <form id="salonForm">
        <input type="hidden" id="salonId">
        <label for="salonName">نام سالن</label>
        <input type="text" id="salonName" required>

        <label for="salonArtist">آرایشگر مسئول</label>
        <select id="salonArtist" required>
            <option value="">انتخاب آرایشگر</option>
        </select>

        <div style="display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));">
            <div>
                <label for="salonPercent1">سهم من از مشتری سالن (%)</label>
                <input type="number" id="salonPercent1" min="0" max="100" value="50">
            </div>
            <div>
                <label for="salonPercent2">سهم سالن از مشتری سالن (%)</label>
                <input type="number" id="salonPercent2" min="0" max="100" value="50">
            </div>
            <div>
                <label for="salonPercent3">سهم سالن از مشتری من (%)</label>
                <input type="number" id="salonPercent3" min="0" max="100" value="50">
            </div>
            <div>
                <label for="salonPercent4">سهم من از مشتری خودم (%)</label>
                <input type="number" id="salonPercent4" min="0" max="100" value="50">
            </div>
        </div>

        <button type="submit" class="btn-primary">ذخیره سالن</button>
        <button type="button" class="btn-secondary" data-reset="salon">انصراف</button>
    </form>

    <table id="salonTable">
        <thead>
            <tr>
                <th>نام سالن</th>
                <th>آرایشگر</th>
                <th>درصدها</th>
                <th>عملیات</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<div id="artists" class="card section" style="display:none">
    <h2>مدیریت آرایشگرها</h2>
    <form id="artistForm">
        <input type="hidden" id="artistId">
        <label for="artistFirstName">نام</label>
        <input type="text" id="artistFirstName" required>

        <label for="artistLastName">نام خانوادگی</label>
        <input type="text" id="artistLastName" required>

        <label for="artistMobile">شماره موبایل</label>
        <input type="tel" id="artistMobile" required>

        <label for="artistGender">جنسیت</label>
        <select id="artistGender">
            <option value="">انتخاب جنسیت</option>
            <option value="female">بانوی هنرمند</option>
            <option value="male">آقای هنرمند</option>
            <option value="other">سایر</option>
        </select>

        <label for="artistDescription">توضیحات</label>
        <textarea id="artistDescription" placeholder="معرفی کوتاه آرایشگر"></textarea>

        <button type="submit" class="btn-primary">ذخیره آرایشگر</button>
        <button type="button" class="btn-secondary" data-reset="artist">انصراف</button>
    </form>

    <table id="artistTable">
        <thead>
            <tr>
                <th>نام و نام خانوادگی</th>
                <th>موبایل</th>
                <th>جنسیت</th>
                <th>سالن‌های فعال</th>
                <th>عملیات</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<div id="blog" class="card section" style="display:none">
    <h2>مدیریت بلاگ</h2>
    <form id="blogForm">
        <input type="hidden" id="blogId">
        <label for="blogTitle">عنوان مقاله</label>
        <input type="text" id="blogTitle" required>

        <label for="blogSlug">اسلاگ (اختیاری)</label>
        <input type="text" id="blogSlug" placeholder="مثال: smart-booking-tips">

        <label for="blogExcerpt">خلاصه کوتاه</label>
        <textarea id="blogExcerpt" placeholder="چند خط برای پیش‌نمایش مقاله"></textarea>

        <label for="blogCover">کاور (آدرس تصویر)</label>
        <input type="url" id="blogCover" placeholder="https://...">

        <label for="blogPublishedAt">تاریخ انتشار</label>
        <input type="datetime-local" id="blogPublishedAt">

        <label style="display:flex; gap:8px; align-items:center;">
            <input type="checkbox" id="blogPublished">
            انتشار مقاله فعال باشد
        </label>

        <label for="blogBody">متن مقاله</label>
        <textarea id="blogBody" rows="6" placeholder="متن کامل مقاله" required></textarea>

        <button type="submit" class="btn-primary">ذخیره مقاله</button>
        <button type="button" class="btn-secondary" data-reset="blog">انصراف</button>
    </form>

    <table id="blogTable">
        <thead>
            <tr>
                <th>عنوان</th>
                <th>وضعیت</th>
                <th>تاریخ انتشار</th>
                <th>عملیات</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<script>
    const state = {
        categories: [],
        customers: [],
        salons: [],
        artists: [],
        blogPosts: [],
        editing: {
            category: null,
            customer: null,
            salon: null,
            artist: null,
            blog: null,
        }
    };

    const iconLabels = @json($iconOptions);

    const routes = {
        categories: '/admin/api/categories',
        customers: '/admin/api/customers',
        salons: '/admin/api/salons',
        artists: '/admin/api/artists',
        blog: '/admin/api/blog-posts'
    };

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    function showMessage(message, type = 'success') {
        const $el = $('#admin-message');
        if (!message) {
            $el.hide();
            return;
        }
        $el
            .text(message)
            .removeClass('error')
            .show();
        if (type === 'error') {
            $el.addClass('error').removeClass('status');
        } else {
            $el.addClass('status').removeClass('error');
        }
    }

    function resetForm(type) {
        switch (type) {
            case 'category':
                state.editing.category = null;
                $('#categoryId').val('');
                $('#categoryName').val('');
                $('#categoryDescription').val('');
                $('#categoryIcon').val('');
                break;
            case 'customer':
                state.editing.customer = null;
                $('#customerId').val('');
                $('#customerFirstName, #customerLastName, #customerMobile').val('');
                $('#customerType').val('artist');
                $('#customerArtist, #customerSalon').val('');
                break;
            case 'salon':
                state.editing.salon = null;
                $('#salonId').val('');
                $('#salonName').val('');
                $('#salonArtist').val('');
                $('#salonPercent1').val('50');
                $('#salonPercent2').val('50');
                $('#salonPercent3').val('50');
                $('#salonPercent4').val('50');
                break;
            case 'artist':
                state.editing.artist = null;
                $('#artistId').val('');
                $('#artistFirstName, #artistLastName, #artistMobile, #artistDescription').val('');
                $('#artistGender').val('');
                break;
            case 'blog':
                state.editing.blog = null;
                $('#blogId').val('');
                $('#blogTitle, #blogSlug, #blogExcerpt, #blogCover, #blogBody').val('');
                $('#blogPublished').prop('checked', false);
                $('#blogPublishedAt').val('');
                break;
        }
    }

    function renderCategories() {
        const $tbody = $('#categoryTable tbody');
        $tbody.empty();
        state.categories.forEach(category => {
            const iconLabel = iconLabels[category.icon] || category.icon || '—';
            const row = `
                <tr>
                    <td>${category.name}</td>
                    <td>${category.description || '—'}</td>
                    <td><span class="badge">${iconLabel}</span></td>
                    <td class="actions">
                        <button class="btn-secondary" data-edit-category="${category.id}">ویرایش</button>
                        <button class="btn-primary" style="background:#ef4444" data-delete-category="${category.id}">حذف</button>
                    </td>
                </tr>
            `;
            $tbody.append(row);
        });
    }

    function renderCustomers() {
        const $tbody = $('#customerTable tbody');
        $tbody.empty();
        state.customers.forEach(customer => {
            const typeLabel = customer.type === 'salon' ? 'مشتری سالن' : 'مشتری من';
            const row = `
                <tr>
                    <td>${customer.first_name} ${customer.last_name}</td>
                    <td>${customer.mobile}</td>
                    <td><span class="badge">${typeLabel}</span></td>
                    <td>${customer.artist_name || '—'}</td>
                    <td>${customer.salon_name || '—'}</td>
                    <td class="actions">
                        <button class="btn-secondary" data-edit-customer="${customer.id}">ویرایش</button>
                        <button class="btn-primary" style="background:#ef4444" data-delete-customer="${customer.id}">حذف</button>
                    </td>
                </tr>
            `;
            $tbody.append(row);
        });
    }

    function renderSalons() {
        const $tbody = $('#salonTable tbody');
        $tbody.empty();
        state.salons.forEach(salon => {
            const percentages = [
                `من/مشتری سالن: ${salon.customer_salon_my_percent || 0}%`,
                `سالن/مشتری سالن: ${salon.customer_salon_salon_percent || 0}%`,
                `سالن/مشتری من: ${salon.my_customer_salon_percent || 0}%`,
                `من/مشتری خودم: ${salon.my_customer_my_percent || 0}%`
            ].join('<br>');
            const row = `
                <tr>
                    <td>${salon.name}</td>
                    <td>${salon.artist_name || '—'}</td>
                    <td>${percentages}</td>
                    <td class="actions">
                        <button class="btn-secondary" data-edit-salon="${salon.id}">ویرایش</button>
                        <button class="btn-primary" style="background:#ef4444" data-delete-salon="${salon.id}">حذف</button>
                    </td>
                </tr>
            `;
            $tbody.append(row);
        });
    }

    function renderArtists() {
        const $tbody = $('#artistTable tbody');
        $tbody.empty();
        state.artists.forEach(artist => {
            const salons = artist.salons.length ? artist.salons.map(s => s.name).join('، ') : '—';
            const genderMap = { female: 'بانوی هنرمند', male: 'آقای هنرمند', other: 'سایر' };
            const row = `
                <tr>
                    <td>${artist.first_name || ''} ${artist.last_name || ''}</td>
                    <td>${artist.mobile || '—'}</td>
                    <td>${genderMap[artist.gender] || 'نامشخص'}</td>
                    <td>${salons}</td>
                    <td class="actions">
                        <button class="btn-secondary" data-edit-artist="${artist.id}">ویرایش</button>
                        <button class="btn-primary" style="background:#ef4444" data-delete-artist="${artist.id}">حذف</button>
                    </td>
                </tr>
            `;
            $tbody.append(row);
        });

        populateArtistSelects();
    }

    function renderBlogPosts() {
        const $tbody = $('#blogTable tbody');
        $tbody.empty();

        state.blogPosts.forEach(post => {
            const statusLabel = post.is_published ? 'منتشر شده' : 'پیش‌نویس';
            const publishedDate = post.published_at ? new Date(post.published_at).toLocaleString('fa-IR') : '—';
            const row = `
                <tr>
                    <td>${post.title}</td>
                    <td><span class="badge">${statusLabel}</span></td>
                    <td>${publishedDate}
                    </td>
                    <td class="actions">
                        <button class="btn-secondary" data-edit-blog="${post.id}">ویرایش</button>
                        <button class="btn-primary" style="background:#ef4444" data-delete-blog="${post.id}">حذف</button>
                    </td>
                </tr>
            `;
            $tbody.append(row);
        });
    }

    function populateArtistSelects() {
        const $artistSelects = $('#customerArtist, #salonArtist');
        $artistSelects.each(function () {
            const preserve = $(this).val();
            $(this).empty().append('<option value="">انتخاب آرایشگر</option>');
            state.artists.forEach(artist => {
                const name = `${artist.first_name || ''} ${artist.last_name || ''}`.trim() || 'بدون نام';
                $(this).append(`<option value="${artist.id}">${name} (${artist.mobile || '---'})</option>`);
            });
            if (preserve) {
                $(this).val(preserve);
            }
        });
    }

    function populateSalonSelect() {
        const $select = $('#customerSalon');
        const current = $select.val();
        $select.empty().append('<option value="">انتخاب سالن</option>');
        state.salons.forEach(salon => {
            $select.append(`<option value="${salon.id}">${salon.name}</option>`);
        });
        if (current) {
            $select.val(current);
        }
    }

    function handleTabNavigation() {
        $('.tab').on('click', function () {
            $('.tab').removeClass('active');
            $(this).addClass('active');
            const target = $(this).data('target');
            $('.section').hide();
            $(target).fadeIn(150);
        });
    }

    function loadCategories() {
        $.getJSON(routes.categories)
            .done(res => {
                state.categories = res.data || [];
                renderCategories();
            });
    }

    function loadBlogPosts() {
        $.getJSON(routes.blog)
            .done(res => {
                state.blogPosts = res.data || [];
                renderBlogPosts();
            });
    }

    function loadCustomers() {
        $.getJSON(routes.customers)
            .done(res => {
                state.customers = res.data || [];
                renderCustomers();
            });
    }

    function loadSalons() {
        $.getJSON(routes.salons)
            .done(res => {
                state.salons = res.data || [];
                renderSalons();
                populateSalonSelect();
            });
    }

    function loadArtists() {
        $.getJSON(routes.artists)
            .done(res => {
                state.artists = res.data || [];
                renderArtists();
            });
    }

    function initCategoryForm() {
        $('#categoryForm').on('submit', function (e) {
            e.preventDefault();
            const payload = {
                name: $('#categoryName').val(),
                description: $('#categoryDescription').val(),
                icon: $('#categoryIcon').val()
            };
            const id = state.editing.category;
            const ajaxOptions = {
                url: routes.categories + (id ? `/${id}` : ''),
                type: id ? 'POST' : 'POST',
                data: id ? { ...payload, _method: 'PUT' } : payload
            };
            $.ajax(ajaxOptions)
                .done(() => {
                    showMessage('دسته‌بندی با موفقیت ذخیره شد.');
                    resetForm('category');
                    loadCategories();
                })
                .fail(() => showMessage('ذخیره دسته‌بندی انجام نشد.', 'error'));
        });

        $('#categoryTable').on('click', '[data-edit-category]', function () {
            const id = $(this).data('edit-category');
            const category = state.categories.find(item => item.id === id);
            if (!category) return;
            state.editing.category = id;
            $('#categoryId').val(id);
            $('#categoryName').val(category.name);
            $('#categoryDescription').val(category.description || '');
            $('#categoryIcon').val(category.icon || '');
        });

        $('#categoryTable').on('click', '[data-delete-category]', function () {
            const id = $(this).data('delete-category');
            if (!confirm('آیا از حذف این دسته‌بندی مطمئن هستید؟')) return;
            $.ajax({
                url: routes.categories + `/${id}`,
                type: 'POST',
                data: { _method: 'DELETE' }
            })
                .done(() => {
                    showMessage('دسته‌بندی حذف شد.');
                    loadCategories();
                })
                .fail(() => showMessage('امکان حذف دسته‌بندی وجود ندارد.', 'error'));
        });
    }

    function initCustomerForm() {
        $('#customerType').on('change', function () {
            if ($(this).val() === 'salon') {
                $('#customerSalon').prop('disabled', false);
            } else {
                $('#customerSalon').prop('disabled', true).val('');
            }
        }).trigger('change');

        $('#customerForm').on('submit', function (e) {
            e.preventDefault();
            const payload = {
                first_name: $('#customerFirstName').val(),
                last_name: $('#customerLastName').val(),
                mobile: $('#customerMobile').val(),
                type: $('#customerType').val(),
                artist_id: $('#customerArtist').val(),
                salon_id: $('#customerSalon').val()
            };
            const id = state.editing.customer;
            const ajaxOptions = {
                url: routes.customers + (id ? `/${id}` : ''),
                type: 'POST',
                data: id ? { ...payload, _method: 'PUT' } : payload
            };
            $.ajax(ajaxOptions)
                .done(() => {
                    showMessage('اطلاعات مشتری ذخیره شد.');
                    resetForm('customer');
                    loadCustomers();
                })
                .fail(xhr => {
                    const message = xhr.responseJSON?.message || 'ذخیره مشتری انجام نشد.';
                    showMessage(message, 'error');
                });
        });

        $('#customerTable').on('click', '[data-edit-customer]', function () {
            const id = $(this).data('edit-customer');
            const customer = state.customers.find(item => item.id === id);
            if (!customer) return;
            state.editing.customer = id;
            $('#customerId').val(id);
            $('#customerFirstName').val(customer.first_name);
            $('#customerLastName').val(customer.last_name);
            $('#customerMobile').val(customer.mobile);
            $('#customerType').val(customer.type).trigger('change');
            $('#customerArtist').val(customer.artist_id);
            $('#customerSalon').val(customer.salon_id);
        });

        $('#customerTable').on('click', '[data-delete-customer]', function () {
            const id = $(this).data('delete-customer');
            if (!confirm('مشتری حذف شود؟')) return;
            $.ajax({
                url: routes.customers + `/${id}`,
                type: 'POST',
                data: { _method: 'DELETE' }
            })
                .done(() => {
                    showMessage('مشتری حذف شد.');
                    loadCustomers();
                })
                .fail(() => showMessage('خطا در حذف مشتری.', 'error'));
        });
    }

    function initSalonForm() {
        $('#salonForm').on('submit', function (e) {
            e.preventDefault();
            const payload = {
                name: $('#salonName').val(),
                artist_id: $('#salonArtist').val(),
                customer_salon_my_percent: $('#salonPercent1').val(),
                customer_salon_salon_percent: $('#salonPercent2').val(),
                my_customer_salon_percent: $('#salonPercent3').val(),
                my_customer_my_percent: $('#salonPercent4').val(),
            };
            const id = state.editing.salon;
            const ajaxOptions = {
                url: routes.salons + (id ? `/${id}` : ''),
                type: 'POST',
                data: id ? { ...payload, _method: 'PUT' } : payload
            };
            $.ajax(ajaxOptions)
                .done(() => {
                    showMessage('سالن ذخیره شد.');
                    resetForm('salon');
                    loadSalons();
                })
                .fail(() => showMessage('ذخیره سالن با خطا مواجه شد.', 'error'));
        });

        $('#salonTable').on('click', '[data-edit-salon]', function () {
            const id = $(this).data('edit-salon');
            const salon = state.salons.find(item => item.id === id);
            if (!salon) return;
            state.editing.salon = id;
            $('#salonId').val(id);
            $('#salonName').val(salon.name);
            $('#salonArtist').val(salon.artist_id);
            $('#salonPercent1').val(salon.customer_salon_my_percent || 0);
            $('#salonPercent2').val(salon.customer_salon_salon_percent || 0);
            $('#salonPercent3').val(salon.my_customer_salon_percent || 0);
            $('#salonPercent4').val(salon.my_customer_my_percent || 0);
        });

        $('#salonTable').on('click', '[data-delete-salon]', function () {
            const id = $(this).data('delete-salon');
            if (!confirm('آیا از حذف سالن مطمئن هستید؟')) return;
            $.ajax({
                url: routes.salons + `/${id}`,
                type: 'POST',
                data: { _method: 'DELETE' }
            })
                .done(() => {
                    showMessage('سالن حذف شد.');
                    loadSalons();
                })
                .fail(() => showMessage('حذف سالن با خطا مواجه شد.', 'error'));
        });
    }

    function initArtistForm() {
        $('#artistForm').on('submit', function (e) {
            e.preventDefault();
            const payload = {
                first_name: $('#artistFirstName').val(),
                last_name: $('#artistLastName').val(),
                mobile: $('#artistMobile').val(),
                gender: $('#artistGender').val(),
                description: $('#artistDescription').val(),
            };
            const id = state.editing.artist;
            const ajaxOptions = {
                url: routes.artists + (id ? `/${id}` : ''),
                type: 'POST',
                data: id ? { ...payload, _method: 'PUT' } : payload
            };
            $.ajax(ajaxOptions)
                .done(() => {
                    showMessage('اطلاعات آرایشگر ذخیره شد.');
                    resetForm('artist');
                    loadArtists();
                })
                .fail(xhr => {
                    const message = xhr.responseJSON?.message || 'ذخیره آرایشگر انجام نشد.';
                    showMessage(message, 'error');
                });
        });

        $('#artistTable').on('click', '[data-edit-artist]', function () {
            const id = $(this).data('edit-artist');
            const artist = state.artists.find(item => item.id === id);
            if (!artist) return;
            state.editing.artist = id;
            $('#artistId').val(id);
            $('#artistFirstName').val(artist.first_name || '');
            $('#artistLastName').val(artist.last_name || '');
            $('#artistMobile').val(artist.mobile || '');
            $('#artistGender').val(artist.gender || '');
            $('#artistDescription').val(artist.description || '');
        });

        $('#artistTable').on('click', '[data-delete-artist]', function () {
            const id = $(this).data('delete-artist');
            if (!confirm('آرایشگر حذف شود؟ حذف آرایشگر سالن‌های مرتبط را نیز حذف می‌کند.')) return;
            $.ajax({
                url: routes.artists + `/${id}`,
                type: 'POST',
                data: { _method: 'DELETE' }
            })
                .done(() => {
                    showMessage('آرایشگر حذف شد.');
                    loadArtists();
                    loadSalons();
                })
                .fail(() => showMessage('حذف آرایشگر با خطا روبرو شد.', 'error'));
        });
    }

    function initBlogForm() {
        $('#blogForm').on('submit', function (e) {
            e.preventDefault();
            const payload = {
                title: $('#blogTitle').val(),
                slug: $('#blogSlug').val(),
                excerpt: $('#blogExcerpt').val(),
                cover_image: $('#blogCover').val(),
                body: $('#blogBody').val(),
                is_published: $('#blogPublished').is(':checked') ? 1 : 0,
                published_at: $('#blogPublishedAt').val(),
            };

            const id = state.editing.blog;
            const ajaxOptions = {
                url: routes.blog + (id ? `/${id}` : ''),
                type: 'POST',
                data: id ? { ...payload, _method: 'PUT' } : payload
            };

            $.ajax(ajaxOptions)
                .done(() => {
                    showMessage('مقاله ذخیره شد.');
                    resetForm('blog');
                    loadBlogPosts();
                })
                .fail(xhr => {
                    const message = xhr.responseJSON?.message || 'ذخیره مقاله انجام نشد.';
                    showMessage(message, 'error');
                });
        });

        $('#blogTable').on('click', '[data-edit-blog]', function () {
            const id = $(this).data('edit-blog');
            const post = state.blogPosts.find(item => item.id === id);
            if (!post) return;

            state.editing.blog = id;
            $('#blogId').val(id);
            $('#blogTitle').val(post.title || '');
            $('#blogSlug').val(post.slug || '');
            $('#blogExcerpt').val(post.excerpt || '');
            $('#blogCover').val(post.cover_image || '');
            $('#blogBody').val(post.body || '');
            $('#blogPublished').prop('checked', !!post.is_published);
            const isoDate = post.published_at ? new Date(post.published_at).toISOString().slice(0, 16) : '';
            $('#blogPublishedAt').val(isoDate);
        });

        $('#blogTable').on('click', '[data-delete-blog]', function () {
            const id = $(this).data('delete-blog');
            if (!confirm('مقاله حذف شود؟')) return;
            $.ajax({
                url: routes.blog + `/${id}`,
                type: 'POST',
                data: { _method: 'DELETE' }
            })
                .done(() => {
                    showMessage('مقاله حذف شد.');
                    loadBlogPosts();
                })
                .fail(() => showMessage('حذف مقاله با خطا روبرو شد.', 'error'));
        });
    }

    $(document).ready(function () {
        handleTabNavigation();

        $('[data-reset]').on('click', function () {
            resetForm($(this).data('reset'));
        });

        initCategoryForm();
        initCustomerForm();
        initSalonForm();
        initArtistForm();
        initBlogForm();

        loadCategories();
        loadArtists();
        loadSalons();
        loadCustomers();
        loadBlogPosts();
    });
</script>
@endsection