@extends('backend.layout.main')

@section('content')

@if(session()->has('message'))
    <div class="alert alert-success alert-dismissible text-center">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        {{ session('message') }}
    </div>
@endif
@if(session()->has('not_permitted'))
    <div class="alert alert-danger alert-dismissible text-center">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        {{ session('not_permitted') }}
    </div>
@endif

<section>
    <div class="container-fluid">

        {{-- ── Action Buttons ── --}}
        <a href="{{ route('repair.service.create') }}" class="btn btn-info btn-icon">
            <i class="dripicons-plus"></i> {{ __('db.add_service_job') }}
        </a>&nbsp;
        <button class="btn btn-warning btn-icon" type="button" id="toggle-filter">
            <i class="dripicons-experiment"></i> {{ __('db.filter_service_jobs') }}
        </button>

        {{-- ── Filter Card ── --}}
        <div class="card mt-3 mb-2">
            <div class="card-body" id="filter-card" style="display: none;">
                <div class="row mt-2">
                    <div class="col-md-3">
                        <div class="form-group top-fields">
                            <label>{{ __('db.date') }}</label>
                            <input type="text" id="daterange-display" class="daterangepicker-field form-control"
                                value="{{ $starting_date }} To {{ $ending_date }}" />
                            <input type="hidden" id="starting_date" value="{{ $starting_date }}" />
                            <input type="hidden" id="ending_date" value="{{ $ending_date }}" />
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group top-fields">
                            <label>{{ __('db.Warehouse') }}</label>
                            <select id="filter_warehouse" class="selectpicker form-control" data-live-search="true" data-live-search-style="begins">
                                <option value="0">{{ __('db.All Warehouse') }}</option>
                                @foreach($lims_warehouse_list as $wh)
                                    <option value="{{ $wh->id }}" {{ $warehouse_id == $wh->id ? 'selected' : '' }}>
                                        {{ $wh->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group top-fields">
                            <label>{{ __('db.service_type') }}</label>
                            <select id="filter_type" class="form-control">
                                <option value="">{{ __('db.all_types') }}</option>
                                <option value="device"  {{ $service_type == 'device'  ? 'selected' : '' }}>{{ __('db.device') }}</option>
                                <option value="vehicle" {{ $service_type == 'vehicle' ? 'selected' : '' }}>{{ __('db.vehicle') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group top-fields">
                            <label>{{ __('db.status') }}</label>
                            <select id="filter_status" class="form-control">
                                <option value="">{{ __('db.all_status') }}</option>
                                <option value="pending"     {{ $status == 'pending'     ? 'selected' : '' }}>{{ __('db.Pending') }}</option>
                                <option value="diagnosed"   {{ $status == 'diagnosed'   ? 'selected' : '' }}>{{ __('db.diagnosed') }}</option>
                                <option value="in_progress" {{ $status == 'in_progress' ? 'selected' : '' }}>{{ __('db.in_progress') }}</option>
                                <option value="completed"   {{ $status == 'completed'   ? 'selected' : '' }}>{{ __('db.Completed') }}</option>
                                <option value="delivered"   {{ $status == 'delivered'   ? 'selected' : '' }}>{{ __('db.Delivered') }}</option>
                                <option value="cancelled"   {{ $status == 'cancelled'   ? 'selected' : '' }}>{{ __('db.Cancel') }}</option>
                            </select>
                        </div>
                    </div>
                    <div id="filter-loading" class="col-12 text-center my-2" style="display:none;">
                        <span class="spinner-border text-primary spinner-border-sm" role="status"></span>
                        <span>{{ __('db.loading_results') }}</span>
                    </div>
                </div>
            </div>
        </div>

    </div>

    {{-- ── DataTable ── --}}
    <div class="table-responsive">
        <table id="service-table" class="table service-list mt-0" style="width:100%">
            <thead>
                <tr>
                    <th class="not-exported"></th>
                    <th>{{ __('db.date') }}</th>
                    <th>{{ __('db.reference') }}</th>
                    <th>{{ __('db.customer') }}</th>
                    <th>{{ __('db.Type') }}</th>
                    <th>{{ __('db.Title') }}</th>
                    <th>{{ __('db.status') }}</th>
                    <th>{{ __('db.priority') }}</th>
                    <th>{{ __('db.Warehouse') }}</th>
                    <th>{{ __('db.Total') }}</th>
                    <th>{{ __('db.Due') }}</th>
                    <th class="not-exported">{{ __('db.action') }}</th>
                </tr>
            </thead>
            <tfoot class="tfoot active">
                <th></th>
                <th>{{ __('db.Total') }}</th>
                <th></th><th></th><th></th><th></th><th></th><th></th><th></th>
                <th></th><th></th><th></th>
            </tfoot>
        </table>
    </div>
</section>

{{-- ── Job Details Modal ── --}}
<div id="job-details-modal" tabindex="-1" role="dialog" aria-labelledby="jobModalLabel" aria-hidden="true" class="modal fade text-left">
    <div role="document" class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="container mt-3 pb-2 border-bottom">
                <div class="row">
                    <div class="col-md-6 d-print-none">
                        <button id="print-btn" type="button" class="btn btn-default btn-sm">
                            <i class="dripicons-print"></i> {{ __('db.Print') }}
                        </button>
                    </div>
                    <div class="col-md-6 d-print-none">
                        <button type="button" data-dismiss="modal" aria-label="Close" class="close">
                            <span aria-hidden="true"><i class="dripicons-cross"></i></span>
                        </button>
                    </div>
                    <div class="col-md-12">
                        <h3 id="jobModalLabel" class="modal-title text-center container-fluid">{{ $general_setting->site_title }}</h3>
                    </div>
                    <div class="col-md-12 text-center">
                        <i style="font-size: 15px;">{{ __('db.service_job_details') }}</i>
                    </div>
                </div>
            </div>

            <div id="job-modal-content" class="modal-body"></div>
            <br>

            {{-- Parts Table --}}
            <table class="table table-bordered product-service-list">
                <thead>
                    <th>#</th>
                    <th>{{ __('db.product') }}</th>
                    <th>{{ __('db.Quantity') }}</th>
                    <th>{{ __('db.Unit Price') }}</th>
                    <th>{{ __('db.Discount') }}</th>
                    <th>{{ __('db.Tax') }}</th>
                    <th>{{ __('db.Subtotal') }}</th>
                </thead>
                <tbody></tbody>
            </table>

            <div id="job-modal-footer" class="modal-body"></div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<style>
    .btn-icon i { margin-right: 5px; }
    .top-fields { margin-top: 10px; position: relative; }
    .top-fields label { font-size: 11px; font-weight: 600; margin-left: 10px; padding: 0 3px; position: absolute; top: -8px; z-index: 9; }
    .top-fields input { font-size: 13px; height: 45px; }
</style>

<script type="text/javascript">

    $("ul#repair").siblings('a').attr('aria-expanded', 'true');
    $("ul#repair").addClass("show");
    $("ul#repair #service-list-menu").addClass("active");

    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

    var starting_date = null;
    var ending_date   = null;
    var warehouse_id  = null;
    var status        = null;
    var service_type  = null;
    var currentJob    = null;

    $('#toggle-filter').on('click', function () {
        $('#filter-card').slideToggle('slow');
    });

    $('.daterangepicker-field').on('apply.daterangepicker', function (ev, picker) {
        $('#starting_date').val(picker.startDate.format('YYYY-MM-DD'));
        $('#ending_date').val(picker.endDate.format('YYYY-MM-DD'));
        serviceTable.ajax.reload();
    });

    $('#filter_warehouse, #filter_type, #filter_status').on('change', function () {
        serviceTable.ajax.reload();
    });

    function confirmDelete() {
        return confirm('{{ __('db.delete_confirmation') }}');
    }

    var serviceTable = $('#service-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('repair.service.data') }}",
            type: 'POST',
            data: function (d) {
                d.starting_date = $('#starting_date').val();
                d.ending_date   = $('#ending_date').val();
                d.warehouse_id  = $('#filter_warehouse').val();
                d.status        = $('#filter_status').val();
                d.service_type  = $('#filter_type').val();
            }
        },
        createdRow: function (row, data) {
            $(row).addClass('service-link');
            $(row).attr('data-job', data['job_data']);
        },
        columns: [
            { data: 'key' },
            { data: 'date' },
            { data: 'reference_no' },
            { data: 'customer' },
            { data: 'service_type' },
            { data: 'title' },
            { data: 'status' },
            { data: 'priority' },
            { data: 'warehouse' },
            { data: 'total_amount' },
            { data: 'due_amount' },
            { data: 'options' },
        ],
        language: {
            'lengthMenu': '_MENU_ {{__("db.records per page")}}',
            'info': '<small>{{__("db.Showing")}} _START_ - _END_ (_TOTAL_)</small>',
            'search': '{{__("db.Search")}}',
            'paginate': {
                'previous': '<i class="dripicons-chevron-left"></i>',
                'next': '<i class="dripicons-chevron-right"></i>'
            }
        },
        order: [[1, 'desc']],
        columnDefs: [
            { orderable: false, targets: [0, 4, 6, 7, 11] },
            {
                render: function (data, type, row, meta) {
                    if (type === 'display') {
                        data = '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>';
                    }
                    return data;
                },
                checkboxes: {
                    selectRow: true,
                    selectAllRender: '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>'
                },
                targets: [0]
            }
        ],
        select: { style: 'multi', selector: 'td:first-child' },
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        dom: '<"row"lfB>rtip',
        buttons: [
            {
                extend: 'pdf',
                text: '<i title="export to pdf" class="fa fa-file-pdf-o"></i>',
                exportOptions: { columns: ':visible:Not(.not-exported)', rows: ':visible' },
                footer: true
            },
            {
                extend: 'excel',
                text: '<i title="export to excel" class="dripicons-document-new"></i>',
                exportOptions: { columns: ':visible:not(.not-exported)', rows: ':visible' },
                footer: true
            },
            {
                extend: 'csv',
                text: '<i title="export to csv" class="fa fa-file-text-o"></i>',
                exportOptions: { columns: ':visible:not(.not-exported)', rows: ':visible' },
                footer: true
            },
            {
                extend: 'print',
                text: '<i title="print" class="fa fa-print"></i>',
                exportOptions: { columns: ':visible:not(.not-exported)', rows: ':visible' },
                footer: true
            },
            {
                extend: 'colvis',
                text: '<i title="column visibility" class="fa fa-eye"></i>',
                columns: ':gt(0)'
            }
        ],
        drawCallback: function () {
            var api = this.api();
            datatable_sum(api, false);
        }
    });

    function datatable_sum(dt_selector, is_calling_first) {
        if (dt_selector.rows('.selected').any() && is_calling_first) {
            var rows = dt_selector.rows('.selected').indexes();
            $(dt_selector.column(9).footer()).html(dt_selector.cells(rows, 9, { page: 'current' }).data().sum().toFixed({{ $general_setting->decimal }}));
            $(dt_selector.column(10).footer()).html(dt_selector.cells(rows, 10, { page: 'current' }).data().sum().toFixed({{ $general_setting->decimal }}));
        } else {
            $(dt_selector.column(9).footer()).html(dt_selector.column(9, { page: 'current' }).data().sum().toFixed({{ $general_setting->decimal }}));
            $(dt_selector.column(10).footer()).html(dt_selector.column(10, { page: 'current' }).data().sum().toFixed({{ $general_setting->decimal }}));
        }
    }

    serviceTable.on('preXhr.dt', function () { $('#filter-loading').show(); });
    serviceTable.on('xhr.dt',    function () { $('#filter-loading').hide(); });

    $(document).on('click', 'tr.service-link td:not(:first-child, :last-child)', function () {
        var job = JSON.parse($(this).parent().attr('data-job'));
        showJobDetails(job);
    });

    function showJobDetails(job) {
        currentJob = job;

        var htmltext = '{{ __("db.date") }}: ' + job.date
            + '<br>{{ __("db.reference") }}: ' + job.reference_no
            + '<br>{{ __("db.status") }}: ' + job.status
            + '<br>{{ __("db.priority") }}: ' + job.priority
            + '<br>{{ __("db.service_type") }}: ' + job.service_type;

        if (job.expected_date && job.expected_date !== 'N/A') {
            htmltext += '<br>{{ __("db.expected_delivery") }}: ' + job.expected_date;
        }
        if (job.note) {
            htmltext += '<br>{{ __("db.Note") }}: ' + job.note;
        }

        htmltext += '<br><br><div class="row">'
            + '<div class="col-md-6"><strong>{{ __("db.customer") }}:</strong><br>' + job.customer + '</div>'
            + '<div class="col-md-6"><div class="float-right"><strong>{{ __("db.Warehouse") }}:</strong><br>'
            + job.warehouse + '<br><strong>{{ __("db.technician") }}:</strong><br>' + job.technician
            + '</div></div></div>';

        $(".product-service-list tbody").remove();

        $.get('{{ url("repair/service") }}/' + job.id + '/parts-data', function (data) {
            var newBody = $("<tbody>");

            if (!data || data === 'Something is wrong!') {
                var newRow = $("<tr>");
                newRow.append('<td colspan="7">{{ __("db.no_parts_added") }}</td>');
                newBody.append(newRow);
            } else {
                var items = data.items || [];
                $.each(items, function (index, item) {
                    var newRow = $("<tr>");
                    var cols = '';
                    cols += '<td>' + (index + 1) + '</td>';
                    cols += '<td>' + item.product_name + '</td>';
                    cols += '<td>' + item.quantity + '</td>';
                    cols += '<td>' + item.unit_price + '</td>';
                    cols += '<td>' + item.discount + '</td>';
                    cols += '<td>' + item.tax + '</td>';
                    cols += '<td>' + item.total + '</td>';
                    newRow.append(cols);
                    newBody.append(newRow);
                });

                var rows = [
                    ['{{ __("db.parts_total") }}',    data.parts_total],
                    ['{{ __("db.service_charge") }}', data.service_charge],
                    ['{{ __("db.Discount") }}',       data.discount],
                    ['{{ __("db.Tax") }}',            data.tax],
                    ['{{ __("db.grand total") }}',    data.total_amount],
                    ['{{ __("db.Paid Amount") }}',    data.paid_amount],
                    ['{{ __("db.Due") }}',            data.due_amount],
                ];
                $.each(rows, function (i, r) {
                    var tr = $("<tr>");
                    tr.append('<td colspan="6">' + r[0] + ':</td><td>' + r[1] + '</td>');
                    newBody.append(tr);
                });
            }

            $("table.product-service-list").append(newBody);
        }).fail(function () {
            var newBody = $("<tbody><tr><td colspan='7'>{{ __('db.no_parts_added') }}</td></tr></tbody>");
            $("table.product-service-list").append(newBody);
        });

        var htmlfooter = '<p>{{ __("db.Note") }}: ' + (job.note || '') + '</p>'
            + '{{ __("db.Total") }}: ' + parseFloat(job.total_amount).toFixed({{ $general_setting->decimal }})
            + ' | {{ __("db.Paid") }}: ' + parseFloat(job.paid_amount).toFixed({{ $general_setting->decimal }})
            + ' | {{ __("db.Due") }}: ' + parseFloat(job.due_amount).toFixed({{ $general_setting->decimal }});

        $('#job-modal-content').html(htmltext);
        $('#job-modal-footer').html(htmlfooter);
        $('#job-details-modal').modal('show');
    }

    $('#print-btn').on('click', function () {
        var job = currentJob;
        var a = window.open('');
        a.document.write('<html><head>');
        a.document.write('<style>');
        a.document.write('body{font-family:sans-serif;line-height:1.5;font-size:13px;}');
        a.document.write('h3{text-align:center;margin-bottom:2px;}');
        a.document.write('table{width:100%;border-collapse:collapse;margin-top:15px;}');
        a.document.write('th,td{border:1px solid #000;padding:7px;text-align:left;}');
        a.document.write('.no-border td{border:none;padding:0;vertical-align:top;}');
        a.document.write('</style>');
        a.document.write('</head><body>');
        a.document.write('<h3>{{ $general_setting->site_title }}</h3>');
        a.document.write('<p style="text-align:center"><i>{{ __("db.service_job_details") }}</i></p>');
        a.document.write('<table class="no-border" style="margin-top:5px;"><tr>');
        a.document.write('<td style="width:50%;padding-left:0;vertical-align:top;">');
        a.document.write('<span>{{ __("db.date") }}:</span> '         + job.date         + '<br>');
        a.document.write('<span>{{ __("db.reference") }}:</span> '    + job.reference_no  + '<br>');
        a.document.write('<span>{{ __("db.service_type") }}:</span> ' + job.service_type  + '<br>');
        a.document.write('<span>{{ __("db.status") }}:</span> '       + job.status        + '<br>');
        a.document.write('<span>{{ __("db.priority") }}:</span> '     + job.priority      + '<br>');
        if (job.expected_date && job.expected_date !== 'N/A')
            a.document.write('<span>{{ __("db.expected_delivery") }}:</span> ' + job.expected_date + '<br>');
        a.document.write('</td>');
        a.document.write('<td style="width:50%;padding-right:0;vertical-align:top;text-align:right;">');
        a.document.write('<strong>{{ __("db.customer") }}:</strong><br>');
        a.document.write((job.customer   || '') + '<br><br>');
        a.document.write('<strong>{{ __("db.Warehouse") }}:</strong><br>');
        a.document.write((job.warehouse  || '') + '<br><br>');
        a.document.write('<strong>{{ __("db.technician") }}:</strong><br>');
        a.document.write((job.technician || '') + '<br>');
        a.document.write('</td></tr></table>');
        var tableHTML = document.querySelector("table.product-service-list").outerHTML;
        a.document.write(tableHTML);
        a.document.write('<br>');
        a.document.write('<p><strong>{{ __("db.Total") }}:</strong> ' + parseFloat(job.total_amount).toFixed({{ $general_setting->decimal }}) + '</p>');
        a.document.write('<p><strong>{{ __("db.Paid") }}:</strong> '  + parseFloat(job.paid_amount).toFixed({{ $general_setting->decimal }})  + '</p>');
        a.document.write('<p><strong>{{ __("db.Due") }}:</strong> '   + parseFloat(job.due_amount).toFixed({{ $general_setting->decimal }})   + '</p>');
        a.document.write('</body></html>');
        a.document.close();
        a.focus();
        setTimeout(function () { a.print(); a.close(); }, 500);
    });

</script>
@endpush