@extends('layout.app')
@section('title', 'Edit Unassigned Part')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
    <style>
        .form-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        .nav-btn-primary { background-color: #1B2A4A; color: white; border: none; }
        .nav-btn-primary:hover { background-color: #121c32; color: white; }
    </style>
@endpush

@section('content')
    <div class="app-hero-header d-flex align-items-center mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Fleet Management</a></li>
            <li class="breadcrumb-item"><a href="{{ route('parts-inventory.assign-page') }}">Parts Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Edit Unassignment</li>
        </ol>
    </div>

    <div class="app-body">
        <div class="row">
            <div class="col-md-8 mx-auto">
                <div class="form-card">
                    <h5 class="mb-4">Edit Unassignment Details</h5>
                    
                    <div class="alert alert-info py-2">
                        <strong>Truck:</strong> {{ $unassignment->truck ? $unassignment->truck->vehicle_no : 'N/A' }} <br>
                        <strong>Part:</strong> {{ $unassignment->stock && $unassignment->stock->product ? $unassignment->stock->product->product_name : 'N/A' }} 
                        (Serial: {{ $unassignment->stock ? $unassignment->stock->item_code : 'N/A' }}) <br>
                        <strong>Status Assigned:</strong> <span class="badge bg-secondary">{{ $unassignment->next_status }}</span>
                    </div>
                    
                    <form id="formEditUnassign">
                        @csrf
                        <div class="row mt-4">
                            <div class="col-md-6 mb-4">
                                <label class="form-label text-muted font-size-12 fw-bold uppercase">Unassign Date</label>
                                <input type="text" name="unassign_date" class="form-control datepicker" required value="{{ date('d-m-Y', strtotime($unassignment->unassign_date)) }}">
                            </div>

                            <div class="col-md-6 mb-4">
                                <label class="form-label text-muted font-size-12 fw-bold uppercase">Truck KM at Removal</label>
                                <input type="number" name="km_at_removal" class="form-control" required min="0" value="{{ $unassignment->truck_km_at_removal }}">
                            </div>
                            
                            <div class="col-md-12 mb-4">
                                <label class="form-label text-muted font-size-12 fw-bold uppercase">Reason for Removal (Optional)</label>
                                <input type="text" name="reason_for_removal" class="form-control" value="{{ $unassignment->reason_for_removal }}">
                            </div>
                            
                            <div class="col-md-12 mt-3 text-end">
                                <a href="{{ route('parts-inventory.assign-page') }}#unassign" class="btn btn-outline-secondary me-2">Cancel</a>
                                <button type="button" class="btn nav-btn-primary px-4" onclick="submitEdit()">Save Changes</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/sweetalert/sweet-alert.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.datepicker').daterangepicker({
                singleDatePicker: true,
                minDate: moment('{{ $financial_year_start }}', 'DD-MM-YYYY'),
                maxDate: moment('{{ $financial_year_end }}', 'DD-MM-YYYY'),
                locale: { format: 'DD-MM-YYYY' }
            });
        });

        function submitEdit() {
            let form = $('#formEditUnassign');
            let unassignDate = $('input[name="unassign_date"]').val();
            
            // Format DD-MM-YYYY to YYYY-MM-DD
            if(unassignDate && unassignDate.indexOf('-') !== -1) {
                let p = unassignDate.split('-');
                if(p[0].length === 2) {
                    $('input[name="unassign_date"]').val(p[2] + '-' + p[1] + '-' + p[0]);
                }
            }

            $.ajax({
                url: '{{ route("parts-inventory.unassign.update", $unassignment->unassignment_id) }}',
                type: 'POST',
                data: form.serialize(),
                success: function(res) {
                    if(res.success) {
                        swal({
                            title: "Updated!",
                            text: res.message,
                            type: "success"
                        }, function() {
                            window.location.href = '{{ route("parts-inventory.assign-page") }}#unassign';
                        });
                    } else {
                        swal("Error", res.message, "error");
                    }
                },
                error: function(err) {
                    swal("Error", err.responseJSON.message || "Something went wrong.", "error");
                }
            });
        }
    </script>
@endpush