@extends('dashboard.admin.layouts.master')

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">Service Requests</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">{{ trans('dash_site.home') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-400 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">{{ trans('dash_site.siteData') }}</li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-400 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">Service Requests</li>
            </ul>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxxl">
        <div class="card card-flush">
            <div class="card-body pt-0">
                <table class="table align-middle table-row-dashed fs-6 gy-3" id="data">
                    <thead>
                    <tr class="fw-semibold fs-6 text-gray-800">
                        <th>ID</th>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Service Type</th>
                        <th>Client Type</th>
                        <th>Created</th>
                        <th>{{ trans('forms.Action') }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" id="kt_modal_1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header border-0 pb-2">
                    <div>
                        <h3 class="modal-title mb-1">Service Request Details</h3>
                        <div class="text-muted fs-7">Review the submitted customer information and attached images.</div>
                    </div>
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                    </div>
                </div>
                <div class="modal-body pt-4">
                    <div class="row g-6">
                        <div class="col-lg-6">
                            <div class="card border shadow-sm h-100">
                                <div class="card-header border-0 pb-0">
                                    <h4 class="card-title fs-5 fw-bold m-0">Customer Information</h4>
                                </div>
                                <div class="card-body pt-4">
                                    <div class="service-request-kv">
                                        <div class="service-request-kv__item">
                                            <span class="service-request-kv__label">Name</span>
                                            <span id="sr_name" class="service-request-kv__value"></span>
                                        </div>
                                        <div class="service-request-kv__item">
                                            <span class="service-request-kv__label">Phone</span>
                                            <span id="sr_phone" class="service-request-kv__value"></span>
                                        </div>
                                        <div class="service-request-kv__item">
                                            <span class="service-request-kv__label">Email</span>
                                            <span id="sr_email" class="service-request-kv__value"></span>
                                        </div>
                                        <div class="service-request-kv__item">
                                            <span class="service-request-kv__label">Address</span>
                                            <span id="sr_address" class="service-request-kv__value"></span>
                                        </div>
                                        <div class="service-request-kv__item">
                                            <span class="service-request-kv__label">Service Type</span>
                                            <span id="sr_service_type" class="service-request-kv__value"></span>
                                        </div>
                                        <div class="service-request-kv__item">
                                            <span class="service-request-kv__label">Client Type</span>
                                            <span id="sr_client_type" class="service-request-kv__value text-capitalize"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="card border shadow-sm h-100">
                                <div class="card-header border-0 pb-0">
                                    <h4 class="card-title fs-5 fw-bold m-0">Organization Information</h4>
                                </div>
                                <div class="card-body pt-4">
                                    <div class="service-request-kv">
                                        <div class="service-request-kv__item">
                                            <span class="service-request-kv__label">Organization</span>
                                            <span id="sr_organization_name" class="service-request-kv__value"></span>
                                        </div>
                                        <div class="service-request-kv__item">
                                            <span class="service-request-kv__label">License Number</span>
                                            <span id="sr_license_number" class="service-request-kv__value"></span>
                                        </div>
                                        <div class="service-request-kv__item">
                                            <span class="service-request-kv__label">Administrator</span>
                                            <span id="sr_administrator_name" class="service-request-kv__value"></span>
                                        </div>
                                        <div class="service-request-kv__item">
                                            <span class="service-request-kv__label">Administrator Phone</span>
                                            <span id="sr_administrator_phone" class="service-request-kv__value"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="card border shadow-sm">
                                <div class="card-header border-0 pb-0">
                                    <h4 class="card-title fs-5 fw-bold m-0">Request Details</h4>
                                </div>
                                <div class="card-body pt-4">
                                    <div id="sr_message" class="service-request-message"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="card border shadow-sm">
                                <div class="card-header border-0 pb-0">
                                    <h4 class="card-title fs-5 fw-bold m-0">Uploaded Images</h4>
                                </div>
                                <div class="card-body pt-4">
                                    <div id="sr_images" class="row g-4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <style>
        .service-request-kv {
            display: grid;
            gap: 1rem;
        }

        .service-request-kv__item {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            padding-bottom: 1rem;
            border-bottom: 1px dashed #e4e6ef;
        }

        .service-request-kv__item:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .service-request-kv__label {
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            color: #7e8299;
        }

        .service-request-kv__value {
            color: #181c32;
            font-size: 1rem;
            font-weight: 600;
            word-break: break-word;
        }

        .service-request-message {
            min-height: 120px;
            padding: 1rem 1.25rem;
            border-radius: 0.75rem;
            background: #f8f9fb;
            color: #5e6278;
            line-height: 1.8;
            white-space: pre-wrap;
        }

        .service-request-image {
            display: block;
            border-radius: 0.85rem;
            overflow: hidden;
            border: 1px solid #e4e6ef;
            background: #f8f9fb;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .service-request-image:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

        .service-request-image img {
            width: 100%;
            height: 210px;
            object-fit: cover;
            display: block;
        }
    </style>

    <script>
        var datatable;

        $(document).ready(function () {
            datatable = $('#data').DataTable({
                processing: true,
                serverSide: true,
                dom: 'lfrtip',
                ajax: "{{ route('admin.service-requests.index') }}",
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'name', name: 'name'},
                    {data: 'phone', name: 'phone'},
                    {data: 'service_type', name: 'service_type', orderable: false},
                    {data: 'client_type', name: 'client_type'},
                    {data: 'created_at', name: 'created_at'},
                    {data: 'action', name: 'action', orderable: false},
                ],
                order: [[0, 'desc']]
            });

            datatable.on('draw', function () {
                KTMenu.createInstances();
            });
        });

        function getDetails(id) {
            $.ajax({
                type: 'get',
                url: "{{ route('admin.service-requests.show', ['service_request' => '__ID__']) }}".replace('__ID__', id),
                success: function (response) {
                    var oneData = response.one_data;
                    $('#sr_name').text(oneData.name || '-');
                    $('#sr_phone').text(oneData.phone || '-');
                    $('#sr_email').text(oneData.email || '-');
                    $('#sr_address').text(oneData.address || '-');
                    $('#sr_service_type').text(oneData.service_type || '-');
                    $('#sr_client_type').text(oneData.client_type || '-');
                    $('#sr_organization_name').text(oneData.organization_name || '-');
                    $('#sr_license_number').text(oneData.license_number || '-');
                    $('#sr_administrator_name').text(oneData.administrator_name || '-');
                    $('#sr_administrator_phone').text(oneData.administrator_phone || '-');
                    $('#sr_message').text(oneData.message || '-');

                    var imagesHtml = '';
                    (oneData.image_urls || []).forEach(function (url) {
                        imagesHtml += '<div class="col-sm-6 col-lg-4 col-xl-3"><a href="' + url + '" target="_blank" rel="noopener" class="service-request-image"><img src="' + url + '" alt="request image"></a></div>';
                    });

                    $('#sr_images').html(imagesHtml || '<div class="col-12"><div class="service-request-message">No uploaded images.</div></div>');
                }
            });
        }
    </script>
@endsection