@extends('user.layouts')

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

@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>
    .history-page {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    .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: 20px;
    }

    .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;
    }

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

    .search-btn {
        border: 0;
        background: #0d6efd;
        color: #fff;
    }

    .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;
    }

    #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;
    }

    .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;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
    }

    .status-badge i {
        font-size: 6px;
    }

    .status-approved {
        background: #eaf8f0;
        color: #198754;
    }

    .status-rejected {
        background: #fdeff0;
        color: #dc3545;
    }

    .status-pending {
        background: #fff6e7;
        color: #d68a00;
    }

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

    .modal-content {
        border: 0;
        border-radius: 14px;
        overflow: hidden;
    }

    .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) {
        .history-page {
            padding-top: 17px;
        }

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

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

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

@endsection


@section('content')

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

    <div>
        <h3 class="page-title">Service Request History</h3>

        <p class="page-subtitle">
            View approved, rejected and pending service requests
        </p>
    </div>


    {{-- FILTERS --}}

    <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 & Filter
                            </h5>

                            <p class="filter-subtitle">
                                Find history using date, agent, category and status
                            </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-2 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="Agent name">

                        </div>


                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                            <label class="filter-label">
                                Category
                            </label>

                            <input type="text"
                                   id="category_name"
                                   class="form-control filter-control"
                                   placeholder="Category name">

                        </div>


                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                            <label class="filter-label">
                                Malayalam
                            </label>

                            <input type="text"
                                   id="malayalam_name"
                                   class="form-control filter-control"
                                   placeholder="Malayalam name">

                        </div>


                        <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">

                            <label class="filter-label">
                                Status
                            </label>

                            <select id="status_filter"
                                    class="form-select filter-control">

                                <option value="">All Status</option>
                                <option value="Approved">Approved</option>
                                <option value="Rejected">Rejected</option>
                                <option value="Pending">Pending</option>

                            </select>

                        </div>


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

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

                                <button type="button"
                                        id="filterBtn"
                                        class="btn search-btn">

                                    <i class="fa-solid fa-magnifying-glass"></i>
                                    Search

                                </button>

                                <button type="button"
                                        id="resetBtn"
                                        class="btn reset-btn">

                                    <i class="fa-solid fa-rotate-left"></i>
                                    Reset

                                </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>STATUS</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="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>

                                            @if($service->status == 'approved')

                                                <span class="status-badge status-approved">

                                                    <i class="fa-solid fa-circle"></i>
                                                    Approved

                                                </span>

                                            @elseif($service->status == 'rejected')

                                                <span class="status-badge status-rejected">

                                                    <i class="fa-solid fa-circle"></i>
                                                    Rejected

                                                </span>

                                            @else

                                                <span class="status-badge status-pending">

                                                    <i class="fa-solid fa-circle"></i>
                                                    Pending

                                                </span>

                                            @endif

                                        </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>

@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 setServiceImage(button) {

    document.getElementById('serviceModalImage').src =
        button.getAttribute('data-image');

}
</script>


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

    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 Request History',

                exportOptions: {
                    columns: [0,1,2,3,4,6],
                    modifier: {
                        search: 'applied',
                        order: 'applied'
                    },
                    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 Request History',
                orientation: 'landscape',
                pageSize: 'A4',

                exportOptions: {
                    columns: [0,1,2,3,4,6],
                    modifier: {
                        search: 'applied',
                        order: 'applied'
                    },
                    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 Request History',

                exportOptions: {
                    columns: [0,1,2,3,4,6],
                    modifier: {
                        search: 'applied',
                        order: 'applied'
                    }
                }
            }

        ],

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

    });


    function applyFilters() {

        const from = $('#from_date').val();
        const to = $('#to_date').val();

        if (from && to && from > to) {

            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.column(4)
            .search($('#malayalam_name').val().trim());

        table.column(6)
            .search($('#status_filter').val());

        table.draw();
    }


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


    $('#status_filter').on('change', function () {
        applyFilters();
    });


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


    $('#agent_name, #category_name, #malayalam_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('');
        $('#malayalam_name').val('');
        $('#status_filter').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