@extends('layouts.backapp')

@section('content')
<style>
    .table-responsive {
        height: 60vh;
        overflow: auto;
    }

    .nav-link-tab {
        font-weight: bold !important;
    }

    .nav-link-tab.active {
        font-weight: normal !important;
    }

    .dataTables_wrapper .dataTable td, .dataTables_wrapper .dataTable th, .dataTables_wrapper .dataTable tr {
        background: #fff;
    }
</style>
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
    <div class="kt-portlet__head kt-portlet__head--lg">
        <div class="kt-portlet__head-label">
            <span class="kt-portlet__head-icon">
                <i class="kt-font-brand flaticon2-line-chart"></i>
            </span>
            <h3 class="kt-portlet__head-title">
                Laporan Pekerjaan
            </h3>
        </div>
        <div class="kt-portlet__head-toolbar">
            <div class="kt-portlet__head-wrapper">
                <div class="kt-portlet__head-actions mt-2 mb-2">            
                    @can('update', $menus['report.transaction'])
                    <a href="{{ route('report.transaction.bulkclose') }}" id="bulk-close" class="btn btn-warning">Close Terpilih</a>
                    @endcan
                    <button id="export" class="btn btn-success">Export</button>
                </div>
            </div>
        </div>
    </div>

    <div class="kt-portlet__body">
        <form class="kt-form kt-form--fit mb-5" id="searchForm">
            <div class="row">
                <div class="col-4 kt-margin-b-10-tablet-and-mobile">
                    <div class="input-daterange input-group" id="kt_datepicker_range">
                        <input type="text" class="form-control" placeholder="Tanggal Mulai" id="date_start" name="date_start">
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="la la-ellipsis-h"></i></span>
                        </div>
                        <input type="text" class="form-control" placeholder="Tanggal Akhir" id="date_end" name="date_end">
                    </div>
                </div>
                <div class="col-3 kt-margin-b-10-tablet-and-mobile">
                    <div class="input-daterange input-group">
                        <select name="mechanic" id="mechanic" class="form-control">
                            <option value="0" disabled selected>Mekanik</option>
                            @foreach ($mechanics as $mechanic)
                            <option value="{{ $mechanic->id }}">{{ $mechanic->name }}</option>
                            @endforeach
                        </select>
                        <select name="sa" id="sa" class="form-control">
                            <option value="0" disabled selected>SA</option>
                            @foreach ($sas as $sa)
                            <option value="{{ $sa->id }}">{{ $sa->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-3 kt-margin-b-10-tablet-and-mobile">
                    <div class="form-group">
                        <select name="dealer" id="dealer" class="form-control">
                            <option value="0" disabled selected>Dealer</option>
                            @foreach ($dealers as $dealer)
                            <option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-2 kt-margin-b-10-tablet-and-mobile">
                    <button type="button" class="btn btn-brand btn-elevate btn-icon-sm" id="kt_search"> Cari</button>
                </div>
            </div>
        </form>
        <!--begin: Datatable -->
        <div class="table-responsive">
            <table class="table" id="kt_table">
                <thead>
                    <tr>
                        <th style="background: #fff;z-index: 2;"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></th>
                        <th style="background: #fff;z-index: 2;">Tanggal</th>
                        <th>Dealer</th>
                        <th>Mekanik</th>
                        <th>SA</th>
                        <th>No. Polisi</th>
                        <th>Warranty</th>
                        <th>Kategori</th>
                        <th>Qty</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <!--end: Datatable -->
        </div>
    </div>
</div>



<!--begin::Modal-->
<div class="modal fade" id="transactionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form id="transactionForm" data-form="store" class="kt-form">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalHeading"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @csrf
                    <div class="kt-portlet__body">
                        <div class="form-group">
                            <label>Dealer</label>
                            <select name="dealer_id" id="dealer_id" class="form-control">
                                @foreach ($dealers as $dealer)
                                <option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>SPK</label>
                            <input type="text" class="form-control" id="spk" name="spk" placeholder="SPK" value="" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>Tanggal</label>
                            <input type="date" class="form-control" id="date" name="date" placeholder="Tanggal" value="" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>No. Polisi</label>
                            <input type="text" class="form-control" id="police_number" name="police_number" placeholder="No. Polisi" value="" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>Pekerjaan</label>
                            <select name="work_id" id="work_id" class="form-control">
                                @foreach ($works as $work)
                                <option value="{{ $work->id }}">{{ $work->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Qty</label>
                            <input type="number" class="form-control" id="qty" name="qty" placeholder="Qty" value="" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>Warranty</label>
                            <select name="warranty" id="warranty" class="form-control">
                                <option value="1">Ya</option>
                                <option value="0">Tidak</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Service Advisor</label>
                            <select name="sa_id" id="sa_id" class="form-control">
                                @foreach ($sas as $sa)
                                <option value="{{ $sa->id }}">{{ $sa->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="saveBtn" value="create">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!--end::Modal-->

<input type="hidden" name="ajax_url" value="{{ route('report.transaction_data') }}">
@endsection

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

var table = $('#kt_table').DataTable({
    processing: true,
    serverSide: true,
    fixedColumns:   {
        left: 2,
        right: 1
    },
    ajax: {
        url: $('input[name="ajax_url"]').val(),
        type: "POST",
        data: function (q) {
            q.date_start    = $('input[name="date_start"]').val();
            q.date_end      = $('input[name="date_end"]').val();
            q.sa            = $('select[name="sa"]').val();
            q.mechanic      = $('select[name="mechanic"]').val();
            q.dealer        = $('select[name="dealer"]').val();
        }
    },
    columns: [
        {
            data: 'id',
            orderable: false,
            searchable: false,
            name: 'transaction.id',
            render: function(data, type, row) {
                return `<input type="checkbox" name="selected[]" value="${data}" />`;
            }
        },
        {data: 'date', name: 'transactions.date'},
        {data: 'dealer_name', name: 'd.name'},
        {data: 'username', name: 'users.name'},
        {data: 'sa_name', name: 'sa.name'},
        {data: 'police_number', name: 'transactions.police_number'},
        {
            data: 'warranty', 
            name: 'transactions.warranty',
            render: function(data, type, row) {
                if(row.warranty == 1){
                    return 'Ya'
                }else{
                    return 'Tidak'
                }
            }
        },
        {data: 'category_name', name: 'cat.name'},
        {data: 'qty', name: 'transactions.qty'},
        {data: 'action', name: 'action', orderable: false, searchable: false},
    ]
});

$("#export").click(function() {
    let data = {
        date_start  : $('input[name="date_start"]').val(),
        date_end    : $('input[name="date_end"]').val(),
        sa          : $('select[name="sa"]').val(),
        mechanic    : $('select[name="mechanic"]').val(),
        dealer      : $('select[name="dealer"]').val()
    }

    var url = '{{ route("report.transaction.export") }}?' + $.param(data)
    window.location = url;
})

function closeTransaction(id) 
{
    let url = $("#closeTransaction"+id).attr('data-url')
    $.ajax({
        url: url,
        type: 'PUT',
        success: function(res) {
            table.ajax.reload()
        }
    })
}

function destroyTransaction(id)
{
    let action = $("#destroyTransaction"+id).attr("data-action")
    Swal.fire({
        title: 'Hapus Pekerjaan?',
        text: "Anda tidak akan bisa mengembalikannya!",
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#dedede',
        confirmButtonText: 'Hapus'
    }).then((result) => {
        if (result.value) {
            $.ajax({
                url: action,
                type: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    _method: 'DELETE'
                },
                success: function(res) {
                    Swal.fire(
                        'Pekerjaan Dihapus!'
                    )
                    table.ajax.reload()
                }
            })
        }
    })
}

function editTransaction(id) {
    let form_action = $("#editTransaction"+id).attr("data-action")
    let edit_url = $("#editTransaction"+id).attr("data-url")
    $("#transactionModal").modal("show")
    $("#transactionForm").append('<input type="hidden" name="_method" value="PUT">')
    $("#transactionForm").attr('action', form_action)
    $("#transactionForm").attr('data-form', 'update')
    $.get(edit_url, function(res) {
        $("#transactionForm select[name='dealer_id'] option[value='"+ res.data.dealer_id +"']").prop('selected', true);
        $("#transactionForm select[name='sa_id'] option[value='"+ res.data.user_sa_id +"']").prop('selected', true);
        $("#transactionForm select[name='work_id'] option[value='"+ res.data.work_id +"']").prop('selected', true);
        $("#transactionForm select[name='dealer_id'] option[value='"+ res.data.dealer_id +"']").prop('selected', true);
        $("#transactionForm select[name='warranty'] option[value='"+ res.data.warranty +"']").prop('selected', true);
        $("#transactionForm input[name='spk']").val(res.data.spk)
        var d = new Date(res.data.date);
        var day = ("0" + d.getDate()).slice(-2);
        var month = ("0" + (d.getMonth() + 1)).slice(-2);

        var date = d.getFullYear()+"-"+(month)+"-"+(day) ;
        $("#transactionForm input[name='date']").val(date)
        $("#transactionForm input[name='police_number']").val(res.data.police_number)
        $("#transactionForm input[name='qty']").val(res.data.qty)
    })
}

var KTBootstrapDatepicker = function () {
    var arrows;
    arrows = {
        leftArrow: '<i class="la la-angle-left"></i>',
        rightArrow: '<i class="la la-angle-right"></i>'
    }

    var daterange = function () {
        $('#kt_datepicker_range').datepicker({
            todayHighlight: true,
            orientation: "bottom left",
            templates: arrows,
            autoclose: true,
            format: "yyyy-mm-dd",
            todayBtn: "linked",
            clearBtn: true
        });
    }

    return {
        init: function () {
            daterange();
        }
    };
}();

function bulkClose(url, selected) {
    $.ajax({
        url: url,
        type: 'POST',
        data: { selected: selected },
        success: function(res) {
            $("#workModal").modal("hide")
            $('#workForm').trigger("reset")
            table.ajax.reload()
        }
    })
}

jQuery(document).ready(function () {
    // Add event handlers for modal close buttons
    $('.close, [data-dismiss="modal"]').on('click', function() {
        $('#transactionModal').modal('hide');
    });
    
    // Also handle the "Batal" button
    $('.btn-secondary[data-dismiss="modal"]').on('click', function() {
        $('#transactionModal').modal('hide');
    });
    
    KTBootstrapDatepicker.init();

    $('#kt_search').on('click', function (e) {
        e.preventDefault();
        table.ajax.reload();
    });

    $('#bulk-close').on('click', function (e) {
        e.preventDefault();
        let url = $('#bulk-close').attr('href')
        let selected = $("input[name='selected[]']:checked").map(function (idx, elem) {
            return $(elem).val();
        }).get();

        bulkClose(url, selected)
        table.ajax.reload();
    });


    $("#transactionForm").submit(function(e) {
        e.preventDefault();
        $.ajax({
            url: $('#transactionForm').attr("action"),
            type: 'POST',
            data: $('#transactionForm').serialize(),
            success: function(res) {
                $("#transactionModal").modal("hide")
                $('#transactionForm').trigger("reset")
                if(res.status == 200) {      
                    Swal.fire(
                        'Ubah Data',
                        'Data berhasil diubah'
                    ).then((result) => {
                        table.ajax.reload()
                    })
                }
            }
        })
    })

})
    
</script>
@endsection