@extends('layouts.app')
@section('content')
<div id="layout-wrapper">
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0">Service Items</h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Tables</a></li>
                                    <li class="breadcrumb-item active">Service Items</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card" id="serviceItemList">
                            <div class="card-header border-0">
                                <div class="row g-4 align-items-center">
                                    <div class="col-sm-4">
                                        <form action="{{ route('service-items.index') }}" method="GET">
                                            <input type="hidden" name="service_type_id" value="{{ request('service_type_id') }}">
                                            <input type="hidden" name="country_id" value="{{ request('country_id') }}">
                                            <input type="hidden" name="date_from" value="{{ request('date_from') }}">
                                            <input type="hidden" name="date_to" value="{{ request('date_to') }}">
                                            <div class="search-box">
                                                <input type="text" name="q" value="{{ request('q') }}" class="form-control" placeholder="Search service item name or slug...">
                                                <i class="ri-search-line search-icon"></i>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="col-sm-auto ms-auto">
                                        <div class="hstack gap-2">
                                            <button type="button" class="btn btn-info" data-bs-toggle="offcanvas" href="#offcanvasExample">
                                                <i class="ri-filter-3-line align-bottom me-1"></i> Filters
                                            </button>
                                            @can('service-items-create')
                                            <button
                                                type="button"
                                                class="btn btn-success add-btn service-item-modal-trigger"
                                                data-bs-toggle="modal"
                                                data-bs-target="#serviceItemModal"
                                                data-mode="create"
                                                data-store-url="{{ route('service-items.store') }}">
                                                <i class="ri-add-line align-bottom me-1"></i> Add Service Item
                                            </button>
                                            @endcan
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <div class="table-responsive table-card">
                                    <table class="table align-middle" id="serviceItemTable">
                                        <thead class="table-light">
                                            <tr>
                                                <th style="width: 70px;">SL</th>
                                                <th>Name</th>
                                                <th>Country</th>
                                                <th>Service Type</th>
                                                <th>Price</th>
                                                <th>Created Date</th>
                                                <th style="width: 180px;">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody class="list form-check-all">
                                            @forelse ($serviceItems as $item)
                                            <tr>
                                                <td>{{ $serviceItems->firstItem() + $loop->index }}</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0">
                                                            <img src="{{ $item->icon ? asset('storage/' . $item->icon) : asset('assets/images/service-items/avatar-10.jpg') }}" alt="icon" class="avatar-xxs rounded-circle image_src object-fit-cover">
                                                        </div>
                                                        <div class="flex-grow-1 ms-2">{{ $item->name }}</div>
                                                    </div>
                                                </td>
                                                <td>{{ optional($item->country)->name_en ?? '-' }}</td>
                                                <td>{{ optional($item->serviceType)->name ?? '-' }}</td>
                                                <td>{{ $item->price ?? 0 }}</td>
                                                <td>{{ $item->created_at->format('d M, Y') }}</td>
                                                <td>
                                                    <ul class="list-inline hstack gap-2 mb-0">
                                                        <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="View">
                                                            <a href="javascript:void(0);"
                                                                class="text-muted d-inline-block service-item-modal-trigger"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#serviceItemModal"
                                                                data-mode="view"
                                                                data-service-item-name="{{ $item->name }}"
                                                                data-service-item-slug="{{ $item->slug }}"
                                                                data-service-item-country-id="{{ $item->country_id }}"
                                                                data-service-item-service-type-id="{{ $item->service_type_id }}"
                                                                data-service-item-price="{{ $item->price }}"
                                                                data-service-item-summary="{{ $item->summary }}"
                                                                data-service-item-description="{{ $item->description }}"
                                                                data-service-item-meta-title="{{ $item->meta_title }}"
                                                                data-service-item-meta-keywords="{{ $item->meta_keywords }}"
                                                                data-service-item-meta-description="{{ $item->meta_description }}"
                                                                data-service-item-icon-url="{{ $item->icon ? asset('storage/' . $item->icon) : asset('assets/images/service-items/avatar-10.jpg') }}"
                                                                data-service-item-image-url="{{ $item->image ? asset('storage/' . $item->image) : asset('assets/images/service-items/avatar-10.jpg') }}"
                                                                data-service-item-created-at="{{ $item->created_at->format('d M, Y') }}"
                                                                data-update-url="{{ route('service-items.update', $item->id) }}">
                                                                <i class="ri-eye-fill align-bottom"></i>
                                                            </a>
                                                        </li>

                                                        @can('service-items-edit')
                                                        <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
                                                            <a href="javascript:void(0);"
                                                                class="text-muted d-inline-block service-item-modal-trigger"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#serviceItemModal"
                                                                data-mode="edit"
                                                                data-service-item-name="{{ $item->name }}"
                                                                data-service-item-slug="{{ $item->slug }}"
                                                                data-service-item-country-id="{{ $item->country_id }}"
                                                                data-service-item-service-type-id="{{ $item->service_type_id }}"
                                                                data-service-item-price="{{ $item->price }}"
                                                                data-service-item-summary="{{ $item->summary }}"
                                                                data-service-item-description="{{ $item->description }}"
                                                                data-service-item-meta-title="{{ $item->meta_title }}"
                                                                data-service-item-meta-keywords="{{ $item->meta_keywords }}"
                                                                data-service-item-meta-description="{{ $item->meta_description }}"
                                                                data-service-item-icon-url="{{ $item->icon ? asset('storage/' . $item->icon) : asset('assets/images/service-items/avatar-10.jpg') }}"
                                                                data-service-item-image-url="{{ $item->image ? asset('storage/' . $item->image) : asset('assets/images/service-items/avatar-10.jpg') }}"
                                                                data-service-item-created-at="{{ $item->created_at->format('d M, Y') }}"
                                                                data-update-url="{{ route('service-items.update', $item->id) }}">
                                                                <i class="ri-pencil-fill align-bottom"></i>
                                                            </a>
                                                        </li>
                                                        @endcan

                                                        @can('service-items-delete')
                                                        <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Delete">
                                                            <form action="{{ route('service-items.destroy', $item->id) }}" method="POST" class="d-inline">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Do you want to delete this service item?');">
                                                                    <i class="ri-delete-bin-fill"></i>
                                                                </button>
                                                            </form>
                                                        </li>
                                                        @endcan
                                                    </ul>
                                                </td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="7" class="text-center text-danger">
                                                    <strong>No service item found.</strong>
                                                </td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>

                                <div class="d-flex justify-content-end mt-3">
                                    {{ $serviceItems->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @include('layouts.footer')
    </div>
</div>

<div class="modal fade" id="serviceItemModal" tabindex="-1" aria-labelledby="serviceItemModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-light p-3">
                <h5 class="modal-title" id="serviceItemModalLabel">Service Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="serviceItemModalForm" method="POST" autocomplete="off" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="service-item-modal-method" name="_method" value="PUT">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-lg-6">
                            <label for="modal-service-item-name" class="form-label">Name</label>
                            <input type="text" id="modal-service-item-name" name="name" class="form-control" required>
                        </div>
                        <div class="col-lg-6">
                            <label for="modal-service-item-price" class="form-label">Price</label>
                            <input type="number" id="modal-service-item-price" name="price" min="0" step="1" class="form-control" required>
                        </div>

                        <div class="col-lg-6">
                            <label for="modal-service-item-country-id" class="form-label">Country</label>
                            <select id="modal-service-item-country-id" name="country_id" class="form-select" required>
                                <option value="">Select Country</option>
                                @foreach ($countries as $country)
                                <option value="{{ $country->id }}">{{ $country->name_en }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-6">
                            <label for="modal-service-item-service-type-id" class="form-label">Service Type</label>
                            <select id="modal-service-item-service-type-id" name="service_type_id" class="form-select" required>
                                <option value="">Select Service Type</option>
                                @foreach ($serviceTypes as $serviceType)
                                <option value="{{ $serviceType->id }}">{{ $serviceType->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-lg-12">
                            <label for="modal-service-item-summary" class="form-label">Summary</label>
                            <textarea id="modal-service-item-summary" name="summary" class="form-control" rows="2"></textarea>
                        </div>
                        <div class="col-lg-12">
                            <label for="modal-service-item-description" class="form-label">Description</label>
                            <textarea id="modal-service-item-description" name="description" class="form-control" rows="4" required></textarea>
                        </div>

                        <div class="col-lg-6">
                            <label for="modal-service-item-meta-title" class="form-label">Meta Title</label>
                            <textarea id="modal-service-item-meta-title" name="meta_title" class="form-control" rows="2"></textarea>
                        </div>
                        <div class="col-lg-6">
                            <label for="modal-service-item-meta-keywords" class="form-label">Meta Keywords</label>
                            <textarea id="modal-service-item-meta-keywords" name="meta_keywords" class="form-control" rows="2"></textarea>
                        </div>
                        <div class="col-lg-12">
                            <label for="modal-service-item-meta-description" class="form-label">Meta Description</label>
                            <textarea id="modal-service-item-meta-description" name="meta_description" class="form-control" rows="3"></textarea>
                        </div>

                        <div class="col-lg-12">
                            <label for="modal-service-item-slug" class="form-label">Slug</label>
                            <input type="text" id="modal-service-item-slug" class="form-control" readonly>
                        </div>

                        <div class="col-lg-6">
                            <label for="modal-service-item-icon" class="form-label">Icon</label>
                            <input type="file" id="modal-service-item-icon" name="icon" class="form-control" accept="image/png,image/jpeg,image/jpg,image/webp">
                            <img id="modal-service-item-icon-preview" src="{{ asset('assets/images/service-items/avatar-10.jpg') }}" alt="service item icon preview" class="avatar-md rounded object-fit-cover border mt-2">
                        </div>
                        <div class="col-lg-6">
                            <label for="modal-service-item-image" class="form-label">Image</label>
                            <input type="file" id="modal-service-item-image" name="image" class="form-control" accept="image/png,image/jpeg,image/jpg,image/webp">
                            <img id="modal-service-item-image-preview" src="{{ asset('assets/images/service-items/avatar-10.jpg') }}" alt="service item image preview" class="avatar-md rounded object-fit-cover border mt-2">
                        </div>

                        <div class="col-lg-12 existing-service-item-only">
                            <label for="modal-service-item-created-at" class="form-label">Created At</label>
                            <input type="text" id="modal-service-item-created-at" class="form-control" readonly>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="hstack gap-2 justify-content-end">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success" id="serviceItemModalSubmitBtn">Update Service Item</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header bg-light">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Service Item Filters</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>

    <form action="{{ route('service-items.index') }}" method="GET" class="d-flex flex-column justify-content-end h-100">
        <input type="hidden" name="q" value="{{ request('q') }}">
        <div class="offcanvas-body">
            <div class="mb-4">
                <label for="country_id" class="form-label text-muted text-uppercase fw-semibold mb-3">Country</label>
                <select class="form-select" id="country_id" name="country_id">
                    <option value="">All Countries</option>
                    @foreach ($countries as $country)
                    <option value="{{ $country->id }}" {{ (string) request('country_id') === (string) $country->id ? 'selected' : '' }}>{{ $country->name_en }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label for="service_type_id" class="form-label text-muted text-uppercase fw-semibold mb-3">Service Type</label>
                <select class="form-select" id="service_type_id" name="service_type_id">
                    <option value="">All Service Types</option>
                    @foreach ($serviceTypes as $serviceType)
                    <option value="{{ $serviceType->id }}" {{ (string) request('service_type_id') === (string) $serviceType->id ? 'selected' : '' }}>{{ $serviceType->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label for="date_from" class="form-label text-muted text-uppercase fw-semibold mb-3">From Date</label>
                <input type="date" class="form-control" id="date_from" name="date_from" value="{{ request('date_from') }}">
            </div>
            <div class="mb-4">
                <label for="date_to" class="form-label text-muted text-uppercase fw-semibold mb-3">To Date</label>
                <input type="date" class="form-control" id="date_to" name="date_to" value="{{ request('date_to') }}">
            </div>
        </div>
        <div class="offcanvas-footer border-top p-3 text-center hstack gap-2">
            <a href="{{ route('service-items.index') }}" class="btn btn-light w-100">Clear</a>
            <button type="submit" class="btn btn-success w-100">Apply</button>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const modalTriggers = document.querySelectorAll('.service-item-modal-trigger');
        const modalForm = document.getElementById('serviceItemModalForm');
        const modalTitle = document.getElementById('serviceItemModalLabel');
        const modalSubmitButton = document.getElementById('serviceItemModalSubmitBtn');
        const modalMethodField = document.getElementById('service-item-modal-method');
        const nameField = document.getElementById('modal-service-item-name');
        const priceField = document.getElementById('modal-service-item-price');
        const countryField = document.getElementById('modal-service-item-country-id');
        const serviceTypeField = document.getElementById('modal-service-item-service-type-id');
        const summaryField = document.getElementById('modal-service-item-summary');
        const descriptionField = document.getElementById('modal-service-item-description');
        const metaTitleField = document.getElementById('modal-service-item-meta-title');
        const metaKeywordsField = document.getElementById('modal-service-item-meta-keywords');
        const metaDescriptionField = document.getElementById('modal-service-item-meta-description');
        const slugField = document.getElementById('modal-service-item-slug');
        const iconField = document.getElementById('modal-service-item-icon');
        const imageField = document.getElementById('modal-service-item-image');
        const iconPreview = document.getElementById('modal-service-item-icon-preview');
        const imagePreview = document.getElementById('modal-service-item-image-preview');
        const createdAtField = document.getElementById('modal-service-item-created-at');
        const existingOnlyFields = document.querySelectorAll('.existing-service-item-only');
        const defaultIcon = "{{ asset('assets/images/service-items/avatar-10.jpg') }}";
        const defaultImage = "{{ asset('assets/images/service-items/avatar-10.jpg') }}";

        modalTriggers.forEach(function (trigger) {
            trigger.addEventListener('click', function () {
                const mode = this.dataset.mode || 'view';
                const isCreateMode = mode === 'create';
                const isViewMode = mode === 'view';

                modalForm.action = isCreateMode ? this.dataset.storeUrl : this.dataset.updateUrl;
                modalMethodField.disabled = isCreateMode;
                modalMethodField.value = isCreateMode ? 'POST' : 'PUT';

                nameField.value = isCreateMode ? '' : (this.dataset.serviceItemName || '');
                priceField.value = isCreateMode ? '' : (this.dataset.serviceItemPrice || '');
                countryField.value = isCreateMode ? '' : (this.dataset.serviceItemCountryId || '');
                serviceTypeField.value = isCreateMode ? '' : (this.dataset.serviceItemServiceTypeId || '');
                summaryField.value = isCreateMode ? '' : (this.dataset.serviceItemSummary || '');
                descriptionField.value = isCreateMode ? '' : (this.dataset.serviceItemDescription || '');
                metaTitleField.value = isCreateMode ? '' : (this.dataset.serviceItemMetaTitle || '');
                metaKeywordsField.value = isCreateMode ? '' : (this.dataset.serviceItemMetaKeywords || '');
                metaDescriptionField.value = isCreateMode ? '' : (this.dataset.serviceItemMetaDescription || '');
                slugField.value = isCreateMode ? 'Slug will be generated from name' : (this.dataset.serviceItemSlug || '');
                createdAtField.value = isCreateMode ? '' : (this.dataset.serviceItemCreatedAt || '');

                iconPreview.src = isCreateMode ? defaultIcon : (this.dataset.serviceItemIconUrl || defaultIcon);
                imagePreview.src = isCreateMode ? defaultImage : (this.dataset.serviceItemImageUrl || defaultImage);
                iconField.value = '';
                imageField.value = '';

                modalTitle.textContent = isCreateMode ? 'Add Service Item' : (isViewMode ? 'View Service Item' : 'Edit Service Item');
                modalSubmitButton.textContent = isCreateMode ? 'Create Service Item' : 'Update Service Item';
                modalSubmitButton.classList.toggle('d-none', isViewMode);

                nameField.readOnly = isViewMode;
                priceField.readOnly = isViewMode;
                countryField.disabled = isViewMode;
                serviceTypeField.disabled = isViewMode;
                summaryField.readOnly = isViewMode;
                descriptionField.readOnly = isViewMode;
                metaTitleField.readOnly = isViewMode;
                metaKeywordsField.readOnly = isViewMode;
                metaDescriptionField.readOnly = isViewMode;
                iconField.disabled = isViewMode;
                imageField.disabled = isViewMode;

                existingOnlyFields.forEach(function (element) {
                    element.classList.toggle('d-none', isCreateMode);
                });
            });
        });

        imageField.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                imagePreview.src = URL.createObjectURL(file);
            }
        });

        iconField.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                iconPreview.src = URL.createObjectURL(file);
            }
        });
    });
</script>
@endsection