@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="createForm" class="text-nowrap col-11 col-6 mx-auto 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 createForm = document.querySelector('#createForm')
        const sendUrl = "{{ route('repair-detail-create-done') }}"
        let updateRepairUrl = '{{ route('update_repair', ['id' => ':id']) }}'
        updateRepairUrl = updateRepairUrl.replace(':id', id)
        
        createForm.addEventListener('submit', function(e){
            e.preventDefault()
            let formData = new FormData()
            formData.append('repair_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{
                    successAlert('新增成功', updateRepairUrl)
                }
            })
        })
    })

</script>