@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 Types</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 Types</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card" id="serviceTypeList">
                            <div class="card-header border-0">
                                <div class="row g-4 align-items-center">
                                    <div class="col-sm-4">
                                        <form action="{{ route('service-types.index') }}" method="GET">
                                            <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 type 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-types-create')
                                            <button
                                                type="button"
                                                class="btn btn-success add-btn service-type-modal-trigger"
                                                data-bs-toggle="modal"
                                                data-bs-target="#serviceTypeModal"
                                                data-mode="create"
                                                data-store-url="{{ route('service-types.store') }}">
                                                <i class="ri-add-line align-bottom me-1"></i> Add Service Type
                                            </button>
                                            @endcan
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <div class="table-responsive table-card">
                                    <table class="table align-middle" id="serviceTypeTable">
                                        <thead class="table-light">
                                            <tr>
                                                <th style="width: 70px;">SL</th>
                                                <th>Name</th>
                                                <th>Slug</th>
                                                <th>Price</th>
                                                <th>Service Items</th>
                                                <th>Created Date</th>
                                                <th style="width: 180px;">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody class="list form-check-all">
                                            @forelse ($serviceTypes as $type)
                                            <tr>
                                                <td>{{ $serviceTypes->firstItem() + $loop->index }}</td>
                                                <td>{{ $type->name }}</td>
                                                <td>{{ $type->slug }}</td>
                                                <td>{{ $type->price ?? 0 }}</td>
                                                <td>{{ $type->service_items_count }}</td>
                                                <td>{{ $type->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-type-modal-trigger"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#serviceTypeModal"
                                                                data-mode="view"
                                                                data-service-type-name="{{ $type->name }}"
                                                                data-service-type-slug="{{ $type->slug }}"
                                                                data-service-type-price="{{ $type->price }}"
                                                                data-service-type-created-at="{{ $type->created_at->format('d M, Y') }}"
                                                                data-update-url="{{ route('service-types.update', $type->id) }}">
                                                                <i class="ri-eye-fill align-bottom"></i>
                                                            </a>
                                                        </li>

                                                        @can('service-types-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-type-modal-trigger"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#serviceTypeModal"
                                                                data-mode="edit"
                                                                data-service-type-name="{{ $type->name }}"
                                                                data-service-type-slug="{{ $type->slug }}"
                                                                data-service-type-price="{{ $type->price }}"
                                                                data-service-type-created-at="{{ $type->created_at->format('d M, Y') }}"
                                                                data-update-url="{{ route('service-types.update', $type->id) }}">
                                                                <i class="ri-pencil-fill align-bottom"></i>
                                                            </a>
                                                        </li>
                                                        @endcan

                                                        @can('service-types-delete')
                                                        <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Delete">
                                                            <form action="{{ route('service-types.destroy', $type->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 type?');">
                                                                    <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 type found.</strong>
                                                </td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>

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

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

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

            <form id="serviceTypeModalForm" method="POST" autocomplete="off">
                @csrf
                <input type="hidden" id="service-type-modal-method" name="_method" value="PUT">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-lg-12">
                            <label for="modal-service-type-name" class="form-label">Name</label>
                            <input type="text" id="modal-service-type-name" name="name" class="form-control" required>
                        </div>

                        <div class="col-lg-12">
                            <label for="modal-service-type-price" class="form-label">Price</label>
                            <input type="number" id="modal-service-type-price" name="price" min="0" step="1" class="form-control">
                        </div>

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

                        <div class="col-lg-12 existing-service-type-only">
                            <label for="modal-service-type-created-at" class="form-label">Created At</label>
                            <input type="text" id="modal-service-type-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="serviceTypeModalSubmitBtn">Update Service Type</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 Type Filters</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>

    <form action="{{ route('service-types.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="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-types.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-type-modal-trigger');
        const modalForm = document.getElementById('serviceTypeModalForm');
        const modalTitle = document.getElementById('serviceTypeModalLabel');
        const modalSubmitButton = document.getElementById('serviceTypeModalSubmitBtn');
        const modalMethodField = document.getElementById('service-type-modal-method');
        const nameField = document.getElementById('modal-service-type-name');
        const priceField = document.getElementById('modal-service-type-price');
        const slugField = document.getElementById('modal-service-type-slug');
        const createdAtField = document.getElementById('modal-service-type-created-at');
        const existingOnlyFields = document.querySelectorAll('.existing-service-type-only');

        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.serviceTypeName || '');
                priceField.value = isCreateMode ? '' : (this.dataset.serviceTypePrice || '');
                slugField.value = isCreateMode ? 'Slug will be generated from name' : (this.dataset.serviceTypeSlug || '');
                createdAtField.value = isCreateMode ? '' : (this.dataset.serviceTypeCreatedAt || '');

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

                nameField.readOnly = isViewMode;
                priceField.readOnly = isViewMode;
                priceField.disabled = isViewMode;

                existingOnlyFields.forEach(function (element) {
                    element.classList.toggle('d-none', isCreateMode);
                });
            });
        });
    });
</script>
@endsection