@extends('layouts.admin-layout')
@include('includes.errorAlert')
@section('title', '查詢維修單明細')
@section('content')
<h3 class="ms-3 mb-4">維修進度查詢</h3>
<div class="row mb-3">
    <div class="text-nowrap col-11 col-8 mx-auto rounded shadow p-4">
        <form id="repairForm" class="d-flex align-items-center mb-3">
            @csrf
            <label for="repair_number" class="me-2">維修單號</label>
            <input type="text" class="input-rwd me-3 rounded border border-dark ps-2 p-1" name="repair_number" id="repair_number" required>
            <button type="submit" class="btn btn-warn">查詢</button>  
        </form>
        <table id="repairTable" class="table table-striped text-center responsive nowrap" style="width:100%"></table>
    </div> 
</div>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function(){
        const searchContainer = document.querySelector('.search-container')
        const repair_number = document.querySelector('#repair_number')
        let repairData = [ ]
        let table = ''

        function getData(e){
            e.preventDefault();

            let formData = new FormData()
            @if(Auth::check() && Auth::user()->company)
            @if(Auth::user()->company == 'comma')
            const url = '{{ route('get_front_repair_comma') }}'
            @elseif(Auth::user()->company == 'n23')
            const url = '{{ route('get_front_repair_n23') }}'
            @endif
            @endif
            const repairNumberInput = repair_number.value
            
            formData.append('_token', '{{ csrf_token() }}')
            formData.append('repair_number', repairNumberInput)
            fetch( url,{
                'method' :'POST',
                'body': formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.code !== 200){
                    const message = data.message.split('; ').join('\n')
                    errorAlert(message)
                } else{
                    repairData = data.data
                    console.log(repairData)
                    getDataTable()
                    repair_number.value = ''
                }
            })
        }

        function getDataTable() {
            if (table){ table.destroy() }
            table = new DataTable('#repairTable', {
                data: repairData,
                columns: [ 
                    { data: function(){ return repair_number.value }, title: "維修單號" },
                    { data: 'repair_date', title: "日期" },
                    { data: 'repair_status', title: "維修狀況" },
                    {
                        title: "單位",
                        data: null,
                        render: function(data, type, row){
                            switch (row.unit) {
                                case 'comma' :
                                    return '逗點';
                                    break;
                                case 'n23':
                                    return '台灣北緯二十三度';
                                    break;
                                case 'roll_call':
                                    return '早點名';
                                    break;
                                case 'experiment':
                                    return '實驗室';
                                    break;
                                default:
                                    return '無單位';
                            }
                        }
                    },
                ],
                columnDefs: [
                    { responsivePriority: 10001, targets: 3 },
                    { responsivePriority: 10002, targets: 1 },
                ],
                paging: false,
                searching: false,
                ordering: false,
                lengthChange: false,
                info: false,
                pageLength: 50,
                language: {
                    paginate: {
                        previous: '<i class="bi bi-chevron-double-left"></i>',
                        next: '<i class="bi bi-chevron-double-right"></i>'
                    }
                }
            })
            Array.from(table.columns().header()).forEach(header => {
                header.classList.add('border', 'border-end-0','border-dark','text-center')
            })
            table.column(3).header().classList.remove('border-end-0')
        }   
    
        repairForm.addEventListener('submit', getData)
    })

</script>