@extends('layouts.backend.index')
@section('title', $label)

@section('content')
<div class="card">
    <div class="card-body">
        <x-section-header
            action="list"
            :icon="$icon"
            :label="$label"
        />

        <div class="row mt-4">
            <div class="col-sm-6 col-md-2">
                <x-form.date-picker
                    id="year"
                    label="Tahun"
                    picker-type="year"
                    :old="date('Y')"
                />
            </div>
            <div class="col-sm-6 col-md-3">
                <x-form.select
                    id="month"
                    label="Bulan"
                    :option="$option_month"
                    optional
                />
            </div>
        </div>

        <button type="button" id="btn-search" class="btn btn-dark btn-sm">
            <i class="mdi mdi-magnify"></i> &nbsp;SEARCH
        </button>
    </div>
</div>
<div class="card mt-4">
    <div class="card-body">
        <button type="button" id="btn-download" class="btn btn-primary btn-sm">
            <i class="mdi mdi-arrow-down-circle"></i> &nbsp;DOWNLOAD
        </button>
        <hr class="mb-0" />

        <div class="table-responsive">
            <table class="table" id="table-work">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>No. Work Order</th>
                        <th>Tanggal</th>
                        <th>Nama Pelanggan</th>
                        <th>Jenis Pekerjaan</th>
                        <th>Tanggal Selesai</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="{{ asset('vendor/datatables.net/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endpush

@push('scripts')
<script src="{{ asset('vendor/datatables.net/datatables.net/js/jquery.dataTables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('vendor/datatables.net/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}" type="text/javascript"></script>

<script>
let year = "{{ date('Y') }}"
let month = ""

$(document).ready(function() {
    window.LaravelDataTables = window.LaravelDataTables || {}
    window.LaravelDataTables["table-work"] = $("#table-work").DataTable({
        dom: 'fltpr',
        language: {
            search: "",
            searchPlaceholder: "Pencarian...",
            lengthMenu: "_MENU_ Data"
        },
        ajax:
        {
            url: "{{ route('report.datatable.work') }}",
            type: "POST",
            data: (d) => {
                d.year = year
                d.month = month
                d._token = token
            }
        },
        processing: true,
        serverSide: true,
        deferRender: true,
        ordering: false,
        aLengthMenu: [[10, 25, 50, 100],[10, 25, 50, 100]],
        drawCallback: function() {
            $(".set-tooltip").tooltip({
                container: "body"
            })
        },
        columns: [
            {
                data: null,
                class: "align-top",
                orderable: false,
                searchable: false,
                render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1
            },
            {
                data: "code",
                class: "align-top",
                render: (data, type, row)  => htmlEntities(row.number)
            },
            {
                data: "code",
                class: "align-top",
                render: (data, type, row)  => dateFormat(row.setdate)
            },
            {
                class: "align-top",
                render: (data, type, row) => htmlEntities(row.sales.customer.name)
            },
            {
                class: "align-top",
                render: (data, type, row) => row.work
            },
            {
                class: "align-top",
                render: (data, type, row) => (row.status != 0 && row.status != 3 && row.status != 7) ? dateFormat(row.finished_at) : ""
            },
            {
                class: "align-top",
                render: (data, type, row) => row.status_label
            },
        ]
    })

    $($.fn.dataTable.tables(true)).css('width', '100%')

    $("#btn-search").click(function(){
        year = $("#year").val()
        month = $("#month").val()

        window.LaravelDataTables["table-work"].ajax.reload()
    })

    $("#btn-download").click(function(){
        window.location = `{{ route('report.download.work') }}?year=${year}&month=${month}`
    })
})
</script>
@endpush