@extends('user.layouts')

@section('title', 'Service Request')

@section('header')

<link rel="stylesheet" href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">
<link rel="stylesheet" href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">

<style>
    .request-page {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    .page-header-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        flex-wrap: wrap;
    }

    .page-title {
        margin: 0;
        font-size: 25px;
        font-weight: 700;
        color: #252a30;
    }

    .page-subtitle {
        margin: 5px 0 0;
        font-size: 12px;
        color: #8c939c;
    }

    .filter-card,
    .table-card {
        border: 0;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 3px 18px rgba(0, 0, 0, .05);
    }

    .filter-card .card-body,
    .table-card .card-body {
        padding: 22px;
    }

    .filter-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
    }

    .filter-icon {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: #eef5ff;
        color: #0d6efd;
    }

    .filter-title {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: #292e34;
    }

    .filter-subtitle {
        margin: 3px 0 0;
        font-size: 11px;
        color: #9298a1;
    }

    .filter-label {
        display: block;
        margin-bottom: 6px;
        font-size: 11px;
        font-weight: 600;
        color: #606770;
    }

    .filter-control {
        height: 41px;
        border: 1px solid #e0e4e9;
        border-radius: 8px;
        font-size: 12px;
        box-shadow: none !important;
    }

    .filter-control:focus {
        border-color: #86b7fe;
    }

    .filter-search-btn,
    .filter-reset-btn {
        height: 41px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 16px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
    }

    .filter-search-btn {
        border: 1px solid #0d6efd;
        background: #0d6efd;
        color: #fff;
    }

    .filter-reset-btn {
        border: 1px solid #e0e4e9;
        background: #f8f9fa;
        color: #59616a;
    }

    #data-table {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0;
    }

    #data-table thead th {
        padding: 13px 12px;
        border-bottom: 1px solid #e8ebef;
        background: #f7f8fa;
        color: #555d66;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
        vertical-align: middle;
    }

    #data-table tbody td {
        padding: 13px 12px;
        border-bottom: 1px solid #f0f1f3;
        color: #41474e;
        font-size: 12px;
        vertical-align: middle;
    }

    #data-table tbody tr:hover td {
        background: #fafbfc;
    }

    .agent-wrapper {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .agent-avatar {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 8px;
        background: #eef5ff;
        color: #0d6efd;
        font-size: 11px;
        font-weight: 700;
    }

    .agent-name {
        font-weight: 600;
        color: #343a40;
    }

    .view-image-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border: 1px solid #cfe0f7;
        border-radius: 7px;
        background: #f5f9ff;
        color: #0d6efd;
        font-size: 11px;
        font-weight: 600;
    }

    .view-image-btn:hover {
        background: #0d6efd;
        color: #fff;
    }

    .action-wrapper {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .approve-action,
    .reject-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 0;
        border-radius: 7px;
        padding: 7px 10px;
        font-size: 11px;
        font-weight: 600;
    }

    .approve-action {
        background: #eaf8f0;
        color: #198754;
    }

    .approve-action:hover {
        background: #198754;
        color: #fff;
    }

    .reject-action {
        background: #fdeff0;
        color: #dc3545;
    }

    .reject-action:hover {
        background: #dc3545;
        color: #fff;
    }

    .modal-content {
        border: 0;
        border-radius: 14px;
        box-shadow: 0 15px 45px rgba(0, 0, 0, .15);
    }

    .request-modal-icon {
        width: 58px;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        border-radius: 50%;
        font-size: 20px;
    }

    .approve-modal-icon {
        background: #eaf8f0;
        color: #198754;
    }

    .reject-modal-icon {
        background: #fdeff0;
        color: #dc3545;
    }

    #serviceModalImage {
        max-width: 100%;
        max-height: 70vh;
        object-fit: contain;
        border-radius: 10px;
    }

    .dt-buttons {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
    }

    .dt-buttons .dt-button {
        border: 0 !important;
        border-radius: 7px !important;
        padding: 7px 12px !important;
        margin: 0 !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 600 !important;
    }

    .excel-btn {
        background: #198754 !important;
    }

    .pdf-btn {
        background: #dc3545 !important;
    }

    .print-btn {
        background: #0d6efd !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        height: 37px;
        min-width: 210px;
        margin-left: 7px;
        border: 1px solid #e0e4e9;
        border-radius: 7px;
        padding: 5px 10px;
        outline: none;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info {
        font-size: 12px;
        color: #747b84;
    }

    @media (max-width: 767.98px) {
        .request-page {
            padding-top: 17px;
        }

        .page-title {
            font-size: 21px;
        }

        .filter-card .card-body,
        .table-card .card-body {
            padding: 16px;
        }

        .filter-search-btn,
        .filter-reset-btn {
            flex: 1;
        }
    }
</style>

@endsection


@section('content')

<div class="container-fluid page-wrapper request-page">

    <div class="page-header-wrap">
        <div>
            <h3 class="page-title">Service Request</h3>
            <p class="page-subtitle">
                Review and manage new category service requests
            </p>
        </div>
    </div>


    {{-- FILTER --}}

    <div class="row mt-4">
        <div class="col-12">

            <div class="card filter-card">
                <div class="card-body">

                    <div class="filter-header">

                        <div class="filter-icon">
                            <i class="fa-solid fa-filter"></i>
                        </div>

                        <div>
                            <h5 class="filter-title">Search Requests</h5>
                            <p class="filter-subtitle">
                                Search using date, agent or category
                            </p>
                        </div>

                    </div>

                    <div class="row g-3">

                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                            <label class="filter-label">From Date</label>

                            <input type="date"
                                   id="from_date"
                                   class="form-control filter-control">
                        </div>

                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
                            <label class="filter-label">To Date</label>

                            <input type="date"
                                   id="to_date"
                                   class="form-control filter-control">
                        </div>

                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
                            <label class="filter-label">Agent Name</label>

                            <input type="text"
                                   id="agent_name"
                                   class="form-control filter-control"
                                   placeholder="Search agent">
                        </div>

                        <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                            <label class="filter-label">Category Name</label>

                            <input type="text"
                                   id="category_name"
                                   class="form-control filter-control"
                                   placeholder="Search category">
                        </div>

                        <div class="col-xl-2 col-lg-4 col-md-6 col-sm-12 d-flex align-items-end">

                            <div class="d-flex gap-2 w-100">

                                <button type="button"
                                        id="filterBtn"
                                        class="btn filter-search-btn">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                    Search
                                </button>

                                <button type="button"
                                        id="resetBtn"
                                        class="btn filter-reset-btn">
                                    <i class="fa-solid fa-rotate-left"></i>
                                </button>

                            </div>

                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>


    {{-- TABLE --}}

    <div class="row mt-4">

        <div class="col-12">

            <div class="card table-card">

                <div class="card-body">

                    <div class="table-responsive">

                        <table id="data-table"
                               class="table nowrap align-middle"
                               style="width:100%">

                            <thead>
                                <tr>
                                    <th>SN</th>
                                    <th>REQUEST DATE</th>
                                    <th>AGENT NAME</th>
                                    <th>CATEGORY NAME</th>
                                    <th>CATEGORY NAME MALAYALAM</th>
                                    <th>IMAGE</th>
                                    <th>ACTION</th>
                                </tr>
                            </thead>

                            <tbody>

                                @foreach ($service_list as $service)

                                    @php
                                        $agentName = optional($service->user)->name ?? '-';

                                        $initial = $agentName !== '-'
                                            ? strtoupper(substr(trim($agentName), 0, 1))
                                            : 'A';
                                    @endphp

                                    <tr>

                                        <td>{{ $loop->iteration }}</td>

                                        <td>
                                            {{ $service->created_at
                                                ? $service->created_at->format('Y-m-d')
                                                : '-'
                                            }}
                                        </td>

                                        <td>

                                            <div class="agent-wrapper">

                                                <div class="agent-avatar">
                                                    {{ $initial }}
                                                </div>

                                                <span class="agent-name">
                                                    {{ $agentName }}
                                                </span>

                                            </div>

                                        </td>

                                        <td>
                                            {{ $service->category_name ?? '-' }}
                                        </td>

                                        <td>
                                            {{ $service->category_name_malayalam ?? '-' }}
                                        </td>

                                        <td>

                                            @if(!empty($service->image))

                                                <button type="button"
                                                        class="view-image-btn"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#imageModal"
                                                        data-image="{{ asset($service->image) }}"
                                                        onclick="setServiceImage(this)">

                                                    <i class="fa-regular fa-image"></i>
                                                    View

                                                </button>

                                            @else

                                                <span class="text-muted">
                                                    No Image
                                                </span>

                                            @endif

                                        </td>

                                        <td>

                                            <div class="action-wrapper">

                                                <button type="button"
                                                        class="approve-action"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#ApproveModal"
                                                        data-user-id="{{ $service->id }}"
                                                        onclick="setApproveId(this)">

                                                    <i class="fa-solid fa-check"></i>
                                                    Accept

                                                </button>


                                                <button type="button"
                                                        class="reject-action"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#DeclineModal"
                                                        data-user-id="{{ $service->id }}"
                                                        onclick="setDeclineId(this)">

                                                    <i class="fa-solid fa-xmark"></i>
                                                    Reject

                                                </button>

                                            </div>

                                        </td>

                                    </tr>

                                @endforeach

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>


{{-- IMAGE MODAL --}}

<div class="modal fade"
     id="imageModal"
     tabindex="-1">

    <div class="modal-dialog modal-lg modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">
                    Category Image
                </h5>

                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal">
                </button>

            </div>

            <div class="modal-body text-center bg-light p-4">

                <img id="serviceModalImage"
                     src=""
                     alt="Category Image">

            </div>

        </div>

    </div>

</div>


{{-- APPROVE MODAL --}}

<div class="modal fade"
     id="ApproveModal"
     tabindex="-1">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-body text-center p-4">

                <div class="request-modal-icon approve-modal-icon">
                    <i class="fa-solid fa-check"></i>
                </div>

                <h5 class="fw-bold">
                    Approve Request
                </h5>

                <p class="text-muted small mt-2 mb-4">
                    Are you sure you want to accept this category request?
                </p>

                <form id="approveForm"
                      action="{{ route('approve_category') }}"
                      method="POST">

                    @csrf

                    <input type="hidden"
                           id="approve_id"
                           name="approve_id">

                    <input type="text"
                           name="remark"
                           class="form-control mb-4"
                           value="Your category request has been accepted"
                           readonly>

                    <div class="d-flex justify-content-center gap-2">

                        <button type="button"
                                data-bs-dismiss="modal"
                                class="btn btn-light px-4">
                            Cancel
                        </button>

                        <button type="submit"
                                id="approveBtn"
                                class="btn btn-success px-4">

                            <i class="fa-solid fa-check me-1"></i>
                            Approve

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>


{{-- REJECT MODAL --}}

<div class="modal fade"
     id="DeclineModal"
     tabindex="-1">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-body text-center p-4">

                <div class="request-modal-icon reject-modal-icon">
                    <i class="fa-solid fa-xmark"></i>
                </div>

                <h5 class="fw-bold">
                    Reject Request
                </h5>

                <p class="text-muted small mt-2 mb-4">
                    Are you sure you want to reject this category request?
                </p>

                <form id="rejectForm"
                      action="{{ route('reject_category') }}"
                      method="POST">

                    @csrf

                    <input type="hidden"
                           id="decline_id"
                           name="decline_id">

                    <input type="text"
                           name="remark"
                           class="form-control mb-4"
                           value="Your category request has been rejected"
                           readonly>

                    <div class="d-flex justify-content-center gap-2">

                        <button type="button"
                                data-bs-dismiss="modal"
                                class="btn btn-light px-4">
                            Cancel
                        </button>

                        <button type="submit"
                                id="rejectBtn"
                                class="btn btn-danger px-4">

                            <i class="fa-solid fa-xmark me-1"></i>
                            Reject

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

@endsection


@section('footer')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>
<script src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>
<script src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>
<script src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js"></script>
<script src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js"></script>
<script src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js"></script>
<script src="{{ asset('/assets') }}/js/datatable/jszip.min.js"></script>
<script src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js"></script>
<script src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js"></script>


<script>
function setApproveId(button) {
    document.getElementById('approve_id').value =
        button.getAttribute('data-user-id');
}

function setDeclineId(button) {
    document.getElementById('decline_id').value =
        button.getAttribute('data-user-id');
}

function setServiceImage(button) {
    document.getElementById('serviceModalImage').src =
        button.getAttribute('data-image');
}
</script>


<script>
$(document).ready(function () {

    $('#approveForm').on('submit', function () {

        $('#approveBtn')
            .prop('disabled', true)
            .html(
                '<span class="spinner-border spinner-border-sm me-1"></span> Processing...'
            );

    });

    $('#rejectForm').on('submit', function () {

        $('#rejectBtn')
            .prop('disabled', true)
            .html(
                '<span class="spinner-border spinner-border-sm me-1"></span> Processing...'
            );

    });


    if ($.fn.DataTable.isDataTable('#data-table')) {
        $('#data-table').DataTable().destroy();
    }


    $.fn.dataTable.ext.search.push(function(settings, data) {

        if (settings.nTable.id !== 'data-table') {
            return true;
        }

        const from = $('#from_date').val();
        const to = $('#to_date').val();
        const date = data[1];

        if (from && date < from) {
            return false;
        }

        if (to && date > to) {
            return false;
        }

        return true;
    });


    function cleanExport(data) {
        return $('<div>')
            .html(data)
            .text()
            .replace(/\s+/g, ' ')
            .trim();
    }


    const table = $('#data-table').DataTable({

        responsive: false,
        scrollX: true,
        autoWidth: false,

        pageLength: 10,

        lengthMenu: [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, 'All']
        ],

        order: [[1, 'desc']],

        dom:
            "<'row align-items-center mb-3'" +
                "<'col-lg-7 col-12'B>" +
                "<'col-lg-5 col-12'f>" +
            ">" +
            "<'row mb-3'<'col-12'l>>" +
            "<'row'<'col-12'tr>>" +
            "<'row align-items-center mt-3'" +
                "<'col-md-5 col-12'i>" +
                "<'col-md-7 col-12'p>" +
            ">",

        buttons: [

            {
                extend: 'excelHtml5',
                text: '<i class="fa-solid fa-file-excel me-1"></i> Excel',
                className: 'excel-btn',
                title: 'Service Requests',
                exportOptions: {
                    columns: [0,1,2,3,4],
                    format: {
                        body: function(data) {
                            return cleanExport(data);
                        }
                    }
                }
            },

            {
                extend: 'pdfHtml5',
                text: '<i class="fa-solid fa-file-pdf me-1"></i> PDF',
                className: 'pdf-btn',
                title: 'Service Requests',
                orientation: 'landscape',
                pageSize: 'A4',
                exportOptions: {
                    columns: [0,1,2,3,4],
                    format: {
                        body: function(data) {
                            return cleanExport(data);
                        }
                    }
                }
            },

            {
                extend: 'print',
                text: '<i class="fa-solid fa-print me-1"></i> Print',
                className: 'print-btn',
                title: 'Service Requests',
                exportOptions: {
                    columns: [0,1,2,3,4]
                }
            }

        ],

        columnDefs: [
            {
                targets: [5,6],
                orderable: false,
                searchable: false
            }
        ]

    });


    function applyFilters() {

        if (
            $('#from_date').val() &&
            $('#to_date').val() &&
            $('#from_date').val() > $('#to_date').val()
        ) {
            alert('From Date cannot be greater than To Date.');
            return;
        }

        table.column(2)
            .search($('#agent_name').val().trim());

        table.column(3)
            .search($('#category_name').val().trim());

        table.draw();
    }


    $('#filterBtn').on('click', applyFilters);

    $('#from_date, #to_date').on('change', function () {
        table.draw();
    });

    $('#agent_name, #category_name').on('keypress', function(e) {

        if (e.which === 13) {
            e.preventDefault();
            applyFilters();
        }

    });


    $('#resetBtn').on('click', function () {

        $('#from_date').val('');
        $('#to_date').val('');
        $('#agent_name').val('');
        $('#category_name').val('');

        table.search('');
        table.columns().search('');
        table.draw();

    });


    table.on('order.dt search.dt draw.dt', function () {

        const info = table.page.info();

        table.column(0, {
            search: 'applied',
            order: 'applied',
            page: 'current'
        }).nodes().each(function(cell, i) {

            cell.innerHTML = info.start + i + 1;

        });

    });

    table.draw();

});
</script>

@endsection