@extends('dashboard.layouts.app')

@section('title', __('dashboard.Footer Settings'))
@section('page_heading', __('dashboard.Footer Settings'))

@section('breadcrumb')
<li class="breadcrumb-item text-muted">
    <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
</li>
<li class="breadcrumb-item text-muted">{{ __('dashboard.Footer Settings') }}</li>
@endsection

@section('content')

<div class="row">
    <div class="col-md-12">
        <div class="card card-flush">
            <div class="card-body">
                <form action="{{ route('dashboard.settings.footer.update') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    @method('PATCH')

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="logo" class="form-label">{{ __('dashboard.Logo') }}</label>
                                <input type="file" name="logo" id="logo" class="form-control">
                                @if ($footerSetting->logo)
                                <img src="{{ Storage::url($footerSetting->logo) }}" alt="Logo" class="mt-2" style="max-width: 200px;">
                                @endif
                            </div>
                            <div class="mb-3">
                                <label for="payment_methods_image" class="form-label">{{ __('dashboard.Payment Methods Image') }}</label>
                                <input type="file" name="payment_methods_image" id="payment_methods_image" class="form-control">
                                @if ($footerSetting->payment_methods_image)
                                <img src="{{ Storage::url($footerSetting->payment_methods_image) }}" alt="Payment Methods" class="mt-2" style="max-width: 200px;">
                                @endif
                            </div>

                            <div class="mb-3">
                                <label for="slogan" class="form-label">{{ __('dashboard.Slogan') }}</label>
                                <input type="text" name="slogan" id="slogan" class="form-control" value="{{ $footerSetting->slogan }}">
                            </div>

                            <div class="mb-3">
                                <label for="short_description" class="form-label">{{ __('dashboard.Short Description') }}</label>
                                <textarea name="short_description" id="short_description" class="form-control">{{ $footerSetting->short_description }}</textarea>
                            </div>

                            <div class="mb-3">
                                <label for="newsletter_text" class="form-label">{{ __('dashboard.Newsletter Text') }}</label>
                                <input type="text" name="newsletter_text" id="newsletter_text" class="form-control" value="{{ $footerSetting->newsletter_text }}">
                            </div>

                            <div class="mb-3">
                                <label for="terms_and_conditions_link" class="form-label">{{ __('dashboard.Terms and Conditions Link') }}</label>
                                <input type="text" name="terms_and_conditions_link" id="terms_and_conditions_link" class="form-control" value="{{ $footerSetting->terms_and_conditions_link }}">
                            </div>

                            <div class="mb-3">
                                <label for="privacy_policy_link" class="form-label">{{ __('dashboard.Privacy Policy Link') }}</label>
                                <input type="text" name="privacy_policy_link" id="privacy_policy_link" class="form-control" value="{{ $footerSetting->privacy_policy_link }}">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="show_services" class="form-label">{{ __('dashboard.Show Services') }}</label>
                                <input type="checkbox" name="show_services" id="show_services" value="1" {{ $footerSetting->show_services ? 'checked' : '' }}>
                            </div>

                            <div class="mb-3">
                                <label for="services_title" class="form-label">{{ __('dashboard.Services Title') }}</label>
                                <input type="text" name="services_title" id="services_title" class="form-control" value="{{ $footerSetting->services_title }}">
                            </div>

                            <div class="mb-3">
                                <label for="show_company" class="form-label">{{ __('dashboard.Show Company') }}</label>
                                <input type="checkbox" name="show_company" id="show_company" value="1" {{ $footerSetting->show_company ? 'checked' : '' }}>
                            </div>

                            <div class="mb-3">
                                <label for="company_title" class="form-label">{{ __('dashboard.Company Title') }}</label>
                                <input type="text" name="company_title" id="company_title" class="form-control" value="{{ $footerSetting->company_title }}">
                            </div>

                            <div class="mb-3">
                                <label for="show_brands" class="form-label">{{ __('dashboard.Show Brands') }}</label>
                                <input type="checkbox" name="show_brands" id="show_brands" value="1" {{ $footerSetting->show_brands ? 'checked' : '' }}>
                            </div>

                            <div class="mb-3">
                                <label for="brands_title" class="form-label">{{ __('dashboard.Brands Title') }}</label>
                                <input type="text" name="brands_title" id="brands_title" class="form-control" value="{{ $footerSetting->brands_title }}">
                            </div>

                            <div class="mb-3">
                                <label for="show_links" class="form-label">{{ __('dashboard.Show Links') }}</label>
                                <input type="checkbox" name="show_links" id="show_links" value="1" {{ $footerSetting->show_links ? 'checked' : '' }}>
                            </div>

                            <div class="mb-3">
                                <label for="links_title" class="form-label">{{ __('dashboard.Links Title') }}</label>
                                <input type="text" name="links_title" id="links_title" class="form-control" value="{{ $footerSetting->links_title }}">
                            </div>

                            <div class="mb-3">
                                <label for="show_phones" class="form-label">{{ __('dashboard.Show Phones') }}</label>
                                <input type="checkbox" name="show_phones" id="show_phones" value="1" {{ $footerSetting->show_phones ? 'checked' : '' }}>
                            </div>

                            <div class="mb-3">
                                <label for="phones_title" class="form-label">{{ __('dashboard.Phones Title') }}</label>
                                <input type="text" name="phones_title" id="phones_title" class="form-control" value="{{ $footerSetting->phones_title }}">
                            </div>

                            <div class="mb-3">
                                <label for="show_emails" class="form-label">{{ __('dashboard.Show Emails') }}</label>
                                <input type="checkbox" name="show_emails" id="show_emails" value="1" {{ $footerSetting->show_emails ? 'checked' : '' }}>
                            </div>

                            <div class="mb-3">
                                <label for="emails_title" class="form-label">{{ __('dashboard.Emails Title') }}</label>
                                <input type="text" name="emails_title" id="emails_title" class="form-control" value="{{ $footerSetting->emails_title }}">
                            </div>

                            <div class="mb-3">
                                <label for="show_governorates" class="form-label">{{ __('dashboard.Show Governorates') }}</label>
                                <input type="checkbox" name="show_governorates" id="show_governorates" value="1" {{ $footerSetting->show_governorates ? 'checked' : '' }}>
                            </div>

                            <div class="mb-3">
                                <label for="governorates_title" class="form-label">{{ __('dashboard.Governorates Title') }}</label>
                                <input type="text" name="governorates_title" id="governorates_title" class="form-control" value="{{ $footerSetting->governorates_title }}">
                            </div>
                        </div>
                    </div>

                    {{-- Services --}}
                    <div class="row specific-fields">
                        <div class="col-12">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#addServiceModal">
                                {{ __('dashboard.Add Service') }}
                            </button>

                            <div class="modal fade" id="addServiceModal" tabindex="-1"
                                aria-labelledby="addServiceModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="addServiceModalLabel">
                                                {{ __('dashboard.Add Service') }}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label for="service_title"
                                                    class="form-label">{{ __('dashboard.Title') }}</label>
                                                <input type="text" name="service_title" id="service_title"
                                                    class="form-control">
                                            </div>
                                            <div class="mb-3">
                                                <label for="service_description"
                                                    class="form-label">{{ __('dashboard.Description') }}</label>
                                                <input type="text" name="service_description" id="service_description"
                                                    class="form-control">
                                            </div>
                                            <div class="mb-3">
                                                <label for="service_link" class="form-label">{{ __('dashboard.Link') }}</label>
                                                <input type="text" name="service_link" id="service_link" class="form-control">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">{{ __('dashboard.Close') }}</button>
                                            <button type="button" class="btn btn-primary"
                                                id="addServiceBtn">{{ __('dashboard.Add') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">{{ __('dashboard.Services') }}</label>
                                <table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4"
                                    id="services_table">
                                    <thead>
                                        <tr class="fw-bold text-muted">
                                            <th>{{ __('dashboard.Title') }}</th>
                                            <th>{{ __('dashboard.Description') }}</th>
                                            <th>{{ __('dashboard.Link') }}</th>
                                            <th>{{ __('dashboard.Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    @if ($services->isNotEmpty())
                                        @foreach ($services as $service)
                                            <tr>
                                                <td>
                                                    <input type="hidden" name="services[{{$loop->index}}][id]" value="{{$service->id}}">
                                                    <input type="text" name="services[{{$loop->index}}][title]" value="{{ $service->title }}" class="form-control">
                                                </td>
                                                <td>
                                                    <input type="text" name="services[{{$loop->index}}][description]" value="{{ $service->description }}" class="form-control">
                                                </td>
                                                <td>
                                                    <input type="text" name="services[{{$loop->index}}][link]" value="{{ $service->link }}" class="form-control">
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-sm btn-danger delete-service" data-index="{{ $loop->index }}">
                                                        {{ __('dashboard.Delete') }}
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                    <tr>
                                        <td colspan="4" class="text-center">
                                            {{ __('dashboard.No services added yet.') }}
                                        </td>
                                    </tr>
                                    @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{-- Pages --}}
                    <div class="row specific-fields">
                        <div class="col-12">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPageModal">
                                {{ __('dashboard.Add Page') }}
                            </button>

                            <div class="modal fade" id="addPageModal" tabindex="-1" aria-labelledby="addPageModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="addPageModalLabel">{{ __('dashboard.Add Page') }}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label for="page_title" class="form-label">{{ __('dashboard.Title') }}</label>
                                                <input type="text" name="page_title" id="page_title" class="form-control">
                                            </div>
                                            <div class="mb-3">
                                                <label for="page_link" class="form-label">{{ __('dashboard.Link') }}</label>
                                                <input type="text" name="page_link" id="page_link" class="form-control">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('dashboard.Close') }}</button>
                                            <button type="button" class="btn btn-primary" id="addPageBtn">{{ __('dashboard.Add') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">{{ __('dashboard.Pages') }}</label>
                                <table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4" id="pages_table">
                                    <thead>
                                        <tr class="fw-bold text-muted">
                                            <th>{{ __('dashboard.Title') }}</th>
                                            <th>{{ __('dashboard.Link') }}</th>
                                            <th>{{ __('dashboard.Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    @if ($pages)
                                        @foreach ($pages as $page)
                                        <tr>
                                            <td>
                                                <input type="hidden" name="pages[{{$loop->index}}][id]" value="{{$page->id}}">
                                                <input type="text" name="pages[{{$loop->index}}][title]" value="{{ $page->title }}" class="form-control">
                                            </td>
                                            <td>
                                                <input type="text" name="pages[{{$loop->index}}][link]" value="{{ $page->link }}" class="form-control">
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-sm btn-danger delete-page" data-index="{{ $loop->index }}">
                                                    {{ __('dashboard.Delete') }}
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="3" class="text-center">{{ __('dashboard.No pages added yet.') }}</td>
                                        </tr>
                                    @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{-- Link --}}
                    <div class="row specific-fields">
                        <div class="col-12">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addLinkModal">
                                {{ __('dashboard.Add Link') }}
                            </button>
                            <div class="modal fade" id="addLinkModal" tabindex="-1" aria-labelledby="addLinkModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="addLinkModalLabel">{{ __('dashboard.Add Link') }}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label for="link_title" class="form-label">{{ __('dashboard.Title') }}</label>
                                                <input type="text" name="link_title" id="link_title" class="form-control">
                                            </div>
                                            <div class="mb-3">
                                                <label for="link_url" class="form-label">{{ __('dashboard.Link') }}</label>
                                                <input type="text" name="link_url" id="link_url" class="form-control">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('dashboard.Close') }}</button>
                                            <button type="button" class="btn btn-primary" id="addLinkBtn">{{ __('dashboard.Add') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">{{ __('dashboard.Links') }}</label>
                                <table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4" id="links_table">
                                    <thead>
                                        <tr class="fw-bold text-muted">
                                            <th>{{ __('dashboard.Title') }}</th>
                                            <th>{{ __('dashboard.Link') }}</th>
                                            <th>{{ __('dashboard.Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if($links)
                                            @foreach($links as $link)
                                                <tr>
                                                    <td>
                                                        <input type="hidden" name="links[{{ $loop->index }}][id]" value="{{ $link->id }}">
                                                        <input type="text" name="links[{{ $loop->index }}][title]" value="{{ $link->title }}" class="form-control">
                                                    </td>
                                                    <td>
                                                        <input type="text" name="links[{{ $loop->index }}][link]" value="{{ $link->link }}" class="form-control">
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-sm btn-danger delete-link" data-index="{{ $loop->index }}">
                                                            {{ __('dashboard.Delete') }}
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="3" class="text-center">{{ __('dashboard.No links added yet.') }}</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    

                    {{--  Phones  --}}
                    <div class="row specific-fields">
                        <div class="col-12">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPhoneModal">
                                {{ __('dashboard.Add Phone') }}
                            </button>

                            <div class="modal fade" id="addPhoneModal" tabindex="-1" aria-labelledby="addPhoneModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="addPhoneModalLabel">{{ __('dashboard.Add Phone') }}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label for="phone_number" class="form-label">{{ __('dashboard.Phone') }}</label>
                                                <input type="text" name="phone_number" id="phone_number" class="form-control">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('dashboard.Close') }}</button>
                                            <button type="button" class="btn btn-primary" id="addPhoneBtn">{{ __('dashboard.Add') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">{{ __('dashboard.Phones') }}</label>
                                <table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4" id="phones_table">
                                    <thead>
                                        <tr class="fw-bold text-muted">
                                            <th>{{ __('dashboard.Phone') }}</th>
                                            <th>{{ __('dashboard.Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if($phones)
                                            @foreach($phones as $phone)
                                                <tr>
                                                    <td>
                                                        <input type="hidden" name="phones[{{ $loop->index }}][id]" value="{{ $phone->id }}">
                                                        <input type="text" name="phones[{{ $loop->index }}][phone]" value="{{ $phone->phone }}" class="form-control">
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-sm btn-danger delete-phone" data-index="{{ $loop->index }}">
                                                            {{ __('dashboard.Delete') }}
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="2" class="text-center">{{ __('dashboard.No phones added yet.') }}</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{--  Emails  --}}
                    <div class="row specific-fields">
                        <div class="col-12">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addEmailModal">
                                {{ __('dashboard.Add Email') }}
                            </button>

                            <div class="modal fade" id="addEmailModal" tabindex="-1" aria-labelledby="addEmailModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="addEmailModalLabel">{{ __('dashboard.Add Email') }}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label for="email_address" class="form-label">{{ __('dashboard.Email') }}</label>
                                                <input type="email" name="email_address" id="email_address" class="form-control">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('dashboard.Close') }}</button>
                                            <button type="button" class="btn btn-primary" id="addEmailBtn">{{ __('dashboard.Add') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">{{ __('dashboard.Emails') }}</label>
                                <table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4" id="emails_table">
                                    <thead>
                                        <tr class="fw-bold text-muted">
                                            <th>{{ __('dashboard.Email') }}</th>
                                            <th>{{ __('dashboard.Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if($emails)
                                            @foreach($emails as $email)
                                                <tr>
                                                    <td>
                                                        <input type="hidden" name="emails[{{ $loop->index }}][id]" value="{{ $email->id }}">
                                                        <input type="text" name="emails[{{ $loop->index }}][email]" value="{{ $email->email }}" class="form-control">
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-sm btn-danger delete-email" data-index="{{ $loop->index }}">
                                                            {{ __('dashboard.Delete') }}
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td colspan="2" class="text-center">{{ __('dashboard.No emails added yet.') }}</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{--  Governorates  --}}
                    <div class="mb-3">
                        <label class="form-label" for="governorates_ids">{{ __('dashboard.Governorates') }}</label>
                        <select name="governorates_ids[]" id="governorates_ids" class="form-select form-select-solid" multiple="multiple" data-control="select2" data-placeholder="{{ __('dashboard.Choose Governorates') }}">
                            @foreach ($governorates as $governorate)
                                <option value="{{ $governorate->id }}" {{ in_array($governorate->id, $footerGovernorates) ? 'selected' : '' }}>
                                    {{ $governorate->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- brands --}}
                    <div class="mb-3">
                        <label class="form-label" for="brands_ids">{{ __('dashboard.Brands') }}</label>
                        <select name="brands_ids[]" id="brands_ids" class="form-select form-select-solid" multiple="multiple" data-control="select2" data-placeholder="{{ __('dashboard.Choose Brands') }}">
                            @foreach ($brands as $brand)
                                <option value="{{ $brand->id }}" {{ in_array($brand->id, $footerBrands) ? 'selected' : '' }}>
                                    {{ $brand->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="card-footer d-flex justify-content-end py-6 px-9">
                        <button type="submit" class="btn btn-primary" id="kt_account_profile_details_submit">
                            {{ __('dashboard.Save Changes') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        //  إضافة  خدمة  جديدة
        $('#addServiceBtn').on('click', function() {
            var title = $('#service_title').val();
            var description = $('#service_description').val();
            var link = $('#service_link').val();

            if (title && description) {
                var index = $('#services_table tbody tr').length;
                var newRow = '<tr>' +
                    '<td><input type="text" name="services[' + index + '][title]" value="' + title + '" class="form-control"></td>' +
                    '<td><input type="text" name="services[' + index + '][description]" value="' + description + '" class="form-control"></td>' +
                    '<td><input type="text" name="services[' + index + '][link]" value="' + link + '" class="form-control"></td>' +
                    '<td><button type="button" class="btn btn-sm btn-danger delete-service" data-index="' + index + '">{{ __("dashboard.Delete") }}</button></td>' +
                    '</tr>';

                $('#services_table tbody').append(newRow);

                $('#service_title').val('');
                $('#service_description').val('');
                $('#service_link').val('');
                $('#addServiceModal').modal('hide');
            } else {
                alert('{{ __("dashboard.Please fill in all fields") }}');
            }
        });

        //  حذف  خدمة
        $('#services_table').on('click', '.delete-service', function() {
            var index = $(this).data('index');
            if (confirm('{{ __("dashboard.Are you sure you want to delete this service?") }}')) {
                $(`#services_table tbody tr:eq(${index})`).remove();
            }
        });

        //  إضافة  صفحة  جديدة
        $('#addPageBtn').on('click', function() {
            var title = $('#page_title').val();
            var link = $('#page_link').val();

            if (title && link) {
                var index = $('#pages_table tbody tr').length;
                var newRow = '<tr>' +
                    '<td><input type="text" name="pages[' + index + '][title]" value="' + title + '" class="form-control"></td>' +
                    '<td><input type="text" name="pages[' + index + '][link]" value="' + link + '" class="form-control"></td>' +
                    '<td><button type="button" class="btn btn-sm btn-danger delete-page" data-index="' + index + '">{{ __("dashboard.Delete") }}</button></td>' +
                    '</tr>';

                $('#pages_table tbody').append(newRow);

                $('#page_title').val('');
                $('#page_link').val('');
                $('#addPageModal').modal('hide');
            } else {
                alert('{{ __("dashboard.Please fill in all fields") }}');
            }
        });

        //  حذف  صفحة
        $('#pages_table').on('click', '.delete-page', function() {
            var index = $(this).data('index');
            if (confirm('{{ __("dashboard.Are you sure you want to delete this page?") }}')) {
                $(`#pages_table tbody tr:eq(${index})`).remove();
            }
        });

        //  إضافة  رابط  جديد
        $('#addLinkBtn').on('click', function() {
            var title = $('#link_title').val();
            var link = $('#link_url').val();

            if (title && link) {
                var index = $('#links_table tbody tr').length;
                var newRow = '<tr>' +
                    '<td><input type="text" name="links[' + index + '][title]" value="' + title + '" class="form-control"></td>' +
                    '<td><input type="text" name="links[' + index + '][link]" value="' + link + '" class="form-control"></td>' +
                    '<td><button type="button" class="btn btn-sm btn-danger delete-link" data-index="' + index + '">{{ __("dashboard.Delete") }}</button></td>' +
                    '</tr>';

                $('#links_table tbody').append(newRow);

                $('#link_title').val('');
                $('#link_url').val('');
                $('#addLinkModal').modal('hide');
            } else {
                alert('{{ __("dashboard.Please fill in all fields") }}');
            }
        });

        //  حذف  رابط
        $('#links_table').on('click', '.delete-link', function() {
            var index = $(this).data('index');
            if (confirm('{{ __("dashboard.Are you sure you want to delete this link?") }}')) {
                $(`#links_table tbody tr:eq(${index})`).remove();
            }
        });

        //  إضافة  رقم  هاتف  جديد
        $('#addPhoneBtn').on('click', function() {
            var phone = $('#phone_number').val();

            if (phone) {
                var index = $('#phones_table tbody tr').length;
                var newRow = '<tr>' +
                    '<td><input type="text" name="phones[' + index + '][phone]" value="' + phone + '" class="form-control"></td>' +
                    '<td><button type="button" class="btn btn-sm btn-danger delete-phone" data-index="' + index + '">{{ __("dashboard.Delete") }}</button></td>' +
                    '</tr>';

                $('#phones_table tbody').append(newRow);

                $('#phone_number').val('');
                $('#addPhoneModal').modal('hide');
            } else {
                alert('{{ __("dashboard.Please fill in all fields") }}');
            }
        });

        //  حذف  رقم  هاتف
        $('#phones_table').on('click', '.delete-phone', function() {
            var index = $(this).data('index');
            if (confirm('{{ __("dashboard.Are you sure you want to delete this phone number?") }}')) {
                $(`#phones_table tbody tr:eq(${index})`).remove();
            }
        });

        //  إضافة  بريد  إلكتروني  جديد
        $('#addEmailBtn').on('click', function() {
            var email = $('#email_address').val();

            if (email) {
                var index = $('#emails_table tbody tr').length;
                var newRow = '<tr>' +
                    '<td><input type="email" name="emails[' + index + '][email]" value="' + email + '" class="form-control"></td>' +
                    '<td><button type="button" class="btn btn-sm btn-danger delete-email" data-index="' + index + '">{{ __("dashboard.Delete") }}</button></td>' +
                    '</tr>';

                $('#emails_table tbody').append(newRow);

                $('#email_address').val('');
                $('#addEmailModal').modal('hide');
            } else {
                alert('{{ __("dashboard.Please fill in all fields") }}');
            }
        });

        //  حذف  بريد  إلكتروني
        $('#emails_table').on('click', '.delete-email', function() {
            var index = $(this).data('index');
            if (confirm('{{ __("dashboard.Are you sure you want to delete this email?") }}')) {
                $(`#emails_table tbody tr:eq(${index})`).remove();
            }
        });

        $('#brands_ids').select2({
            placeholder: '{{ __("dashboard.Choose Brands") }}',
            allowClear: true,
            dir: "rtl",
            language: "ar",
        });

        $('#governorates_ids').select2({
            placeholder: '{{ __("dashboard.Choose Governorates") }}',
            allowClear: true,
            dir: "rtl",
            language: "ar",
        });

        $('.select2-user').select2({
            ajax: {
                url: '{{ route("dashboard.coupons.search.users") }}',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        term: params.term,
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.results
                    };
                },
                cache: true
            },
            placeholder: '{{ __("dashboard.Choose User") }}',
            allowClear: true,
            dir: "rtl",
            language: "ar",
        });

        $('#applicability').trigger('change');

        //  عرض  بيانات  العناصر  الموجودة  في  قاعدة  البيانات
        // @if ($services)
        //     @foreach ($services as $service)
        //         $('#services_table tbody').append('<tr>' +
        //             '<td><input type="text" name="services[{{$loop->index}}][title]" value="{{ $service->title }}" class="form-control"></td>' +
        //             '<td><input type="text" name="services[{{$loop->index}}][description]" value="{{ $service->description }}" class="form-control"></td>' +
        //             '<td><input type="text" name="services[{{$loop->index}}][link]" value="{{ $service->link }}" class="form-control"></td>' +
        //             '<td><button type="button" class="btn btn-sm btn-danger delete-service" data-index="{{ $loop->index }}">{{ __("dashboard.Delete") }}</button></td>' +
        //             '</tr>');
        //     @endforeach
        // @endif

        // @if ($pages)
        //     @foreach ($pages as $page)
        //         $('#pages_table tbody').append('<tr>' +
        //             '<td><input type="text" name="pages[{{$loop->index}}][title]" value="{{ $page->title }}" class="form-control"></td>' +
        //             '<td><input type="text" name="pages[{{$loop->index}}][link]" value="{{ $page->link }}" class="form-control"></td>' +
        //             '<td><button type="button" class="btn btn-sm btn-danger delete-page" data-index="{{ $loop->index }}">{{ __("dashboard.Delete") }}</button></td>' +
        //             '</tr>');
        //     @endforeach
        // @endif

        // @if ($links)
        //     @foreach ($links as $link)
        //         $('#links_table tbody').append('<tr>' +
        //             '<td><input type="text" name="links[{{$loop->index}}][title]" value="{{ $link->title }}" class="form-control"></td>' +
        //             '<td><input type="text" name="links[{{$loop->index}}][link]" value="{{ $link->link }}" class="form-control"></td>' +
        //             '<td><button type="button" class="btn btn-sm btn-danger delete-link" data-index="{{ $loop->index }}">{{ __("dashboard.Delete") }}</button></td>' +
        //             '</tr>');
        //     @endforeach
        // @endif

        // @if ($phones)
        //     @foreach ($phones as $phone)
        //         $('#phones_table tbody').append('<tr>' +
        //             '<td><input type="text" name="phones[{{$loop->index}}][phone]" value="{{ $phone->phone }}" class="form-control"></td>' +
        //             '<td><button type="button" class="btn btn-sm btn-danger delete-phone" data-index="{{ $loop->index }}">{{ __("dashboard.Delete") }}</button></td>' +
        //             '</tr>');
        //     @endforeach
        // @endif

        // @if ($emails)
        //     @foreach ($emails as $email)
        //         $('#emails_table tbody').append('<tr>' +
        //             '<td><input type="email" name="emails[{{$loop->index}}][email]" value="{{ $email->email }}" class="form-control"></td>' +
        //             '<td><button type="button" class="btn btn-sm btn-danger delete-email" data-index="{{ $loop->index }}">{{ __("dashboard.Delete") }}</button></td>' +
        //             '</tr>');
        //     @endforeach
        // @endif

        //  حذف  عنصر  من  الجدول
        $('.delete-service').on('click', function() {
            var index = $(this).data('index');
            if (confirm('{{ __("dashboard.Are you sure you want to delete this service?") }}')) {
                $(`#services_table tbody tr:eq(${index})`).remove();
            }
        });

        $('.delete-page').on('click', function() {
            var index = $(this).data('index');
            if (confirm('{{ __("dashboard.Are you sure you want to delete this page?") }}')) {
                $(`#pages_table tbody tr:eq(${index})`).remove();
            }
        });

        $('.delete-link').on('click', function() {
            var index = $(this).data('index');
            if (confirm('{{ __("dashboard.Are you sure you want to delete this link?") }}')) {
                $(`#links_table tbody tr:eq(${index})`).remove();
            }
        });

        $('.delete-phone').on('click', function() {
            var index = $(this).data('index');
            if (confirm('{{ __("dashboard.Are you sure you want to delete this phone number?") }}')) {
                $(`#phones_table tbody tr:eq(${index})`).remove();
            }
        });

        $('.delete-email').on('click', function() {
            var index = $(this).data('index');
            if (confirm('{{ __("dashboard.Are you sure you want to delete this email?") }}')) {
                $(`#emails_table tbody tr:eq(${index})`).remove();
            }
        });
    });
</script>
@endsection