@extends('layouts.admin-layout')
@include('includes.getFormData')
@include('includes.errorAlert')
@include('includes.successAlert')
@section('title', '編輯維修單')
@section('content')

<h3 class="ms-2 mb-4">編輯維修單</h3>
<div class="row mb-4"> 
    <form id="updateForm" class="col-11 col-6 mx-auto text-nowrap rounded shadow p-4">
        @csrf
        <div class="mb-3 row h4 repair-number">
            <span class="col-3">維修單號</span>
            <span id="repair_number" class="col-9 text-warn"></span>
        </div>
        <div class="mb-2 row">
            <label class="col-form-label col-3" for="name">客戶名稱</label>
            <div class="col-9">
                <input class="form-control" type="text" name="name" required>
            </div>
        </div>
        <div class="mb-2 row">
            <label class="col-form-label col-3" for="phone">聯絡電話</label>
            <div class="col-9">
                <input class="form-control" type="tel" name="phone" required>
            </div>
        </div>
        <div class="mb-2 row">
            <label class="col-form-label col-3" for="product_name">品名</label>
            <div class="col-9">
                <input class="form-control" type="text" name="product_name" required>
            </div>
        </div>
        <div class="mb-2 row">
            <label class="col-form-label col-3" for="repair_reason">維修原因</label>
            <div class="col-9">
                <input class="form-control" type="text" name="repair_reason" required>
            </div>
        </div>
        <div class="mb-2 row">
            <label class="col-form-label col-3" for="contents">內容物</label>
            <div class="col-9">
                <input class="form-control" type="text" name="contents">
            </div>
        </div>
        <div class="mb-2 row">
            <label class="col-3 col-form-label" for="remark">備註</label>
            <div class="col-9">
                <input class="form-control" id="remark" name="remark">
            </div>
        </div>
        <div class="mb-2 row align-items-center">
            <label class="col-form-label col-3">收件日期</label>
            <div class="col-9">
                <p id="received_date" class="ms-2 mb-0"></p>
            </div>
        </div>
        <div class="mb-2 row">
            <label class="col-form-label col-3" for="sent_date">還件日期</label>
            <div class="col-9">
                <input class="form-control" type="date" name="sent_date">
            </div>
        </div>
        <div class="mb-3 row">
            <label class="col-form-label col-3" for="repair_status">處理進度</label>
            <div class="col-9">    
                <select class="form-control" name="repair_status">
                    <option value="已收件">已收件</option>
                    <option value="檢修中">檢修中</option>
                    <option value="靜置中">靜置中</option>
                    <option value="二檢中">二檢中</option>
                    <option value="已回件">已回件</option>
                 </select>
            </div>
        </div> 
        <div class="text-end">
            <a href="{{route('repair-home')}}" class="btn btn-warn me-2">返回</a>
            <button class="btn btn-create" type="submit">儲存</button>
        </div>
    </form>
</div>

<h4 class="ms-2">維修單明細</h4>
<div class="text-end">
    <button class="btn btn-create mb-3" type="button" id="createDetail">
        <i class="bi bi-plus-circle me-1"></i>
        新增維修單明細
    </button>
</div>
<table id="detailTable" class="table table-striped text-center responsive nowrap" style="width:100%"></table>

@endsection

<script>
    document.addEventListener('DOMContentLoaded', function(){  
        const infoId = window.location.pathname.split('/').pop()
        let info = {} 
        const infoUrl = "{{ route('get_admin_repair_info') }}"  
        
        let detailList = [] 
        let table = ''
        const deleteUrl = "{{ route('delete_repair_detail') }}"
        
        const updateForm = document.querySelector('#updateForm')
        const sendUrl = "{{ route('update_repair_info') }}"

        const repair_number = document.querySelector('#repair_number')
        const received_date = document.querySelector('#received_date')
        const name = document.querySelector('input[name="name"]')
        const phone = document.querySelector('input[name="phone"]')
        const product_name = document.querySelector('input[name="product_name"]')
        const repair_reason = document.querySelector('input[name="repair_reason"]')
        const contents = document.querySelector('input[name="contents"]')
        const remark = document.querySelector('input[name="remark"]')
        const sent_date = document.querySelector('input[name="sent_date"]')
        const repair_status = document.querySelector('select[name="repair_status"]')
        
        const createDetail = document.querySelector('#createDetail')
        let createDetailUrl = '{{ route('repair-detail-create', ['id' =>':infoId']) }}'
        createDetailUrl = createDetailUrl.replace(':infoId', infoId)
        
        init()

        function init(){
            if (table){ table.destroy() }

            localStorage.removeItem('repairId');
            localStorage.setItem('repairId', infoId)

            let formData = new FormData()
            formData.append('_token', '{{ csrf_token() }}')
            formData.append('id', infoId)
            fetch(infoUrl, {
                method: 'POST',
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                info = data.data
                render()
                detailList = info.repair_details
                getDataTable()
            })
        }

        function render(){
            repair_number.innerText = info.repair_number
            received_date.innerText = info.received_date
            name.value = info.name
            phone.value = info.phone
            product_name.value = info.product_name
            repair_reason.value = info.repair_reason
            contents.value = info.contents
            remark.value = info.remark
            sent_date.value = info.sent_date
            repair_status.value = info.repair_status
        }
        
        function getDataTable() {
            table = new DataTable('#detailTable', {
                data: detailList,
                columns: [ 
                    { title: "項次", 
                      data: null,
                      render: function ( data, type, row, meta ){
                            return meta.row +1
                        } 
                    },
                    { 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 '無單位';
                            }
                        }
                    },
                    {
                        title: "",
                        data: null,
                        render: function ( data, type, row ) {
                            var url = '{{ route("update_repair_detail", ":id") }}';
                            var id = row.id
                            url = url.replace(':id', id);
                            return `<div class="d-flex flex-nowrap">
                                        <a href="${url}"><button type="button" class="btn btn-edit me-2 btn-sm" data-id="${row.id}"><i class="bi bi-pencil"></i></button></a>
                                        <button type="button" class="btn btn-warn btn-sm" id="delete" data-id="${row.id}"><i class="bi bi-archive" data-id="${row.id}"></i></button>
                                 </div>`
                    }
                    }
                ],
                columnDefs: [
                    { responsivePriority: 10001, targets: 1 },
                ],
                paginate: false,
                responsive: true,
                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>'
                    },
                    emptyTable: '目前尚無資料'
                }
            })
            Array.from(table.columns().header()).forEach(header => {
                header.classList.add('border', 'border-end-0','border-dark','text-center')
            })
            table.column(4).header().classList.remove('border-end-0', 'sorting')  
            deleteInit()
        }   

        function deleteInit(){
            const deleteBtns = document.querySelectorAll('#delete')
            
            function deleteAlert(e){
                console.log(e.target.nodeName)
                const id = e.target.dataset.id
                console.log(id)
                Swal.fire({
                    icon: 'warning',
                    text: '請確認是否要刪除',
                    showCancelButton: true,
                    cancelButtonText:'取消',
                    confirmButtonText: '確認',
                    reverseButtons: true,
                }).then((result) => {
                    if (result.isConfirmed) {
                        deleteItem(id)
                    }
                })  
            }

            function deleteItem (id){
                let formData = new FormData()
                formData.append('_token', '{{ csrf_token() }}')
                formData.append('id', id)
                fetch(deleteUrl, {
                    method: 'POST',
                    body: formData
                })
                .then(res => {
                    res.json()
                    init()
                })
            }
            
            deleteBtns.forEach(btn => btn.addEventListener('click', deleteAlert))
        }

        updateForm.addEventListener('submit', function(e){
            e.preventDefault()
            let formData = new FormData()
            formData.append('id', infoId)
            getFormData(formData)
            fetch( sendUrl, {
                'method' :'POST',
                'body': formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.code !== 200){
                    const message = data.message.replace('; ', '\n').replace('name', '客戶名稱').replace('phone', '聯絡電話')
                        .replace('product_name', '品名').replace('repair_reason', '維修原因').replace('contents', '內容物')
                        .replace('remark', '備註').replace('received_date', '收件日期').replace('repair_status', '維修狀況')
                    errorAlert(message)
                } else{
                    successAlert('更新成功', '{{ route('repair-home') }}')
                }
            })
        })

        createDetail.addEventListener('click', function(){
            window.location.assign(createDetailUrl)
        })
    })

</script>