@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-3"> 
    <form id="updateForm" class="col-11 col-6 mx-auto text-nowrap rounded shadow p-4">
        @csrf
        <div class="mb-2 row">
            <label class="col-form-label col-3" for="repair_date">日期</label>
            <div class="col-9">
                <input class="form-control" type="date" name="repair_date" required>
            </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"> 
            <button class="btn btn-warn me-2" type="button" onclick="window.history.back()">返回</button>
            <button class="btn btn-create" type="submit">儲存</button>
        </div>
    </form>
</div>

@endsection

<script>
    document.addEventListener('DOMContentLoaded', function(){ 
        const id = window.location.pathname.split('/').pop()  
        const repairId = localStorage.getItem('repairId')
        const updateForm = document.querySelector('#updateForm')
        const sendUrl = "{{ route('update_repair_detail_sent') }}"

        let detail = {}
        let detailUrl = '{{ route('get_admin_repair_detail') }}'

        const repair_date = document.querySelector('input[name="repair_date"]')
        const repair_status = document.querySelector('select[name="repair_status"]')
        
        init()

        function init(){
            let formData = new FormData()
            formData.append('_token', '{{ csrf_token() }}')
            formData.append('id', id)
            fetch(detailUrl, {
                method: 'POST',
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                detail = data.data
                render()
            })
        }

        function render(){
            repair_date.value = detail.repair_date
            repair_status.value = detail.repair_status
        }

        updateForm.addEventListener('submit', function(e){
            e.preventDefault()
            let formData = new FormData()
            formData.append('id', id)
            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('repair_date', '日期').replace('repair_status', '維修狀況')
                    errorAlert(message)
                } else{
                    let route = '{{ route("update_repair", ":id") }}'
                    route = route.replace(':id', repairId)
                    successAlert('編輯成功', route)
                }
            })
        })
    })

</script>