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

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/select2/select2.min.css') }}">
    <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">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <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; }
        
        .unassign-status-btn, .part-select-btn { border: 2px solid #e2e8f0; transition: all 0.2s; cursor: pointer; display: block; border-radius: 8px; }
        .unassign-status-btn:has(input:checked) { border-color: #0f172a; background-color: #f8fafc; }
        .part-select-btn:has(input:checked) { border-color: #0f172a; background-color: #f8fafc; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .part-select-btn { padding: 12px 16px; margin-bottom: 8px; }
        .part-select-btn .part-title { font-weight: 600; color: #1e293b; font-size: 14px; }
        .part-select-btn .part-subtitle { color: #64748b; font-size: 12px; }
        .part-select-btn .part-meta { color: #94a3b8; font-size: 11px; float: right; }
    </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') }}">Truck Parts & Inventory</a></li>
            <li class="breadcrumb-item active" aria-current="page">Unassign Part</li>
        </ol>
    </div>

    <div class="app-body">
        <div class="row">
            <div class="col-md-8 mx-auto">
                <div class="form-card">
                    <form id="formUnassign">
                        @csrf
                        <div class="row">
                            <div class="col-md-12 mb-4">
                                <label class="form-label text-muted font-size-12 fw-bold uppercase">Truck</label>
                                <select name="vehicle_id" class="form-select select2" id="vehicle_id" required>
                                    <option value="">Select a truck...</option>
                                    @foreach($vehicles as $veh)
                                        <option value="{{ $veh->id }}">{{ $veh->vehicle_no }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-12 mb-4">
                                <label class="form-label text-muted font-size-12 fw-bold uppercase">Currently Installed — select the part to remove</label>
                                <div id="installed_parts_container">
                                    <div class="text-center p-4 border rounded text-muted" style="background: #f8fafc; border-style: dashed !important;">
                                        Please select a truck to view its installed parts.
                                    </div>
                                </div>
                            </div>
                            
                            <div id="unassignDetails" style="display: none;" class="w-100 row m-0 p-0">
                                <div class="col-md-6 mb-3">
                                    <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') }}" placeholder="DD-MM-YYYY">
                                </div>
                            <div class="col-md-6 mb-3">
                                <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">
                            </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" class="form-control" placeholder="e.g. Scheduled rotation, failure, breakdown...">
                                </div>
                                
                                <div class="col-md-12 mb-4">
                                    <div class="border rounded p-3 bg-light">
                                        <div class="row text-center">
                                            <div class="col-4 border-end">
                                                <div class="text-muted font-size-12 mb-1">KM Used</div>
                                                <div class="fw-bold fs-5" id="stat_km_used">—</div>
                                            </div>
                                            <div class="col-4 border-end">
                                                <div class="text-muted font-size-12 mb-1">Days Used</div>
                                                <div class="fw-bold fs-5" id="stat_days_used">—</div>
                                            </div>
                                            <div class="col-4">
                                                <div class="text-muted font-size-12 mb-1">Cost per KM</div>
                                                <div class="fw-bold fs-5" id="stat_cost_per_km">—</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-12 mb-3">
                                <label class="form-label text-muted font-size-12 fw-bold uppercase">Next Status</label>
                                <div class="row g-2">
                                    <div class="col-md-3">
                                        <label class="w-100 btn btn-outline-secondary text-start p-3 unassign-status-btn">
                                            <input type="radio" name="next_status" value="Reusable" class="d-none" required>
                                            <i class="ri-refresh-line d-block mb-1 fs-4 text-teal"></i>
                                            <span class="fw-bold d-block text-dark">Reusable</span>
                                            <small class="text-muted" style="font-size:10px;">Still in good condition</small>
                                        </label>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="w-100 btn btn-outline-secondary text-start p-3 unassign-status-btn">
                                            <input type="radio" name="next_status" value="Claimable" class="d-none" required>
                                            <i class="ri-shield-star-line d-block mb-1 fs-4 text-warning"></i>
                                            <span class="fw-bold d-block text-dark">Claimable</span>
                                            <small class="text-muted" style="font-size:10px;">Failed within warranty</small>
                                        </label>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="w-100 btn btn-outline-secondary text-start p-3 unassign-status-btn">
                                            <input type="radio" name="next_status" value="Repairing" class="d-none" required>
                                            <i class="ri-tools-line d-block mb-1 fs-4 text-purple"></i>
                                            <span class="fw-bold d-block text-dark">Repairing</span>
                                            <small class="text-muted" style="font-size:10px;">Needs workshop repair</small>
                                        </label>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="w-100 btn btn-outline-secondary text-start p-3 unassign-status-btn">
                                            <input type="radio" name="next_status" value="Scrap" class="d-none" required>
                                            <i class="ri-delete-bin-line d-block mb-1 fs-4 text-danger"></i>
                                            <span class="fw-bold d-block text-dark">Scrap</span>
                                            <small class="text-muted" style="font-size:10px;">End of life</small>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Sub fields (hidden by default) -->
                            <div id="claimFields" style="display: none;" class="col-md-12 mb-3 p-4 rounded" style="background-color: #fefce8; border: 1px solid #fef08a;">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Claim Date</label>
                                        <input type="text" name="claim_date" class="form-control datepicker" value="{{ date('d-m-Y') }}" placeholder="DD-MM-YYYY">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Warranty Status</label>
                                        <select name="warranty_status" class="form-select">
                                            <option value="In Warranty">In Warranty</option>
                                            <option value="Out of Warranty">Out of Warranty</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Vendor</label>
                                        <input type="text" name="vendor_name" class="form-control">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Claim Number</label>
                                        <input type="text" name="claim_number" class="form-control">
                                    </div>
                                </div>
                            </div>

                            <div id="repairFields" style="display: none;" class="col-md-12 mb-3 p-4 rounded" style="background-color: #f5f3ff; border: 1px solid #ddd6fe;">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Repair Date</label>
                                        <input type="text" name="repair_date" class="form-control datepicker" value="{{ date('d-m-Y') }}" placeholder="DD-MM-YYYY">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Vendor</label>
                                        <input type="text" name="repair_vendor" class="form-control">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Estimated Repair Cost (₹)</label>
                                        <input type="number" name="repair_cost" class="form-control" min="0">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Repair Description</label>
                                        <input type="text" name="repair_description" class="form-control">
                                    </div>
                                </div>
                            </div>

                            <div id="scrapFields" style="display: none;" class="col-md-12 mb-3 p-4 rounded" style="background-color: #fff1f2; border: 1px solid #fecdd3;">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Scrap Date</label>
                                        <input type="text" name="scrap_date" class="form-control datepicker" value="{{ date('d-m-Y') }}" placeholder="DD-MM-YYYY">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Scrap Sale Amount (₹)</label>
                                        <input type="number" name="scrap_amount" class="form-control" min="0">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Scrap Reason</label>
                                        <input type="text" name="scrap_reason" class="form-control">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-muted font-size-12 fw-bold uppercase">Buyer Details</label>
                                        <input type="text" name="buyer_details" class="form-control">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12 mt-3">
                                        <button type="button" class="btn nav-btn-primary w-100 py-2" onclick="submitUnassign()">Complete Unassignment</button>
                                    </div>
                                </div> <!-- end unassignDetails -->
                            </div>
                        </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/select2/select2.min.js') }}"></script>
    <script src="{{ asset('theme/assets/sweetalert/sweet-alert.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        let activeTruckParts = [];

        $(document).ready(function() {
            $('.select2').select2({ width: '100%' });
            
            $('.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' }
            });

            // Recalculate stats when date or KM changes
            $('input[name="unassign_date"], input[name="km_at_removal"]').on('change input', calculateStats);

            // Fetch truck parts when truck is selected
            $('#vehicle_id').on('change', function() {
                let truckId = $(this).val();
                let container = $('#installed_parts_container');
                $('#unassignDetails').hide();
                
                if(!truckId) {
                    container.html('<div class="text-center p-4 border rounded text-muted" style="background: #f8fafc; border-style: dashed !important;">Please select a truck to view its installed parts.</div>');
                    return;
                }

                container.html('<div class="text-center p-3 text-muted"><i class="ri-loader-4-line ri-spin"></i> Loading installed parts...</div>');

                $.ajax({
                    url: '{{ route("parts-inventory.unassign.getTruckParts") }}',
                    data: { truck_id: truckId },
                    success: function(res) {
                        if(res.success) {
                            if(res.data.length === 0) {
                                container.html('<div class="text-center p-4 border rounded text-muted" style="background: #f8fafc; border-style: dashed !important;">No active parts found on this truck.</div>');
                                return;
                            }
                            
                            let html = '';
                            res.data.forEach(function(assignment) {
                                let productName = assignment.stock && assignment.stock.product ? assignment.stock.product.product_name : 'Unknown Part';
                                let itemCode = assignment.stock ? assignment.stock.item_code : 'Unknown Serial';
                                let dateStr = new Date(assignment.assignment_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
                                
                                html += `
                                    <label class="part-select-btn">
                                        <input type="radio" name="part_id" value="${assignment.stock_id}" class="d-none" required>
                                        <span class="part-meta">since ${dateStr}</span>
                                        <span class="part-title">${productName}</span>
                                        <span class="part-subtitle ms-2">&middot; ${itemCode}</span>
                                    </label>
                                `;
                            });
                            container.html(html);
                            
                            // Show details when a part is selected
                            $('input[name="part_id"]').on('change', function() {
                                $('#unassignDetails').show();
                                calculateStats();
                            });
                        }
                    }
                });
            });

            // Status Radio Buttons toggle logic
            $('input[name="next_status"]').on('change', function() {
                let val = $(this).val();
                $('#repairFields').hide();
                $('#scrapFields').hide();
                $('#claimFields').hide();
                
                if(val === 'Repairing') $('#repairFields').show();
                if(val === 'Scrap') $('#scrapFields').show();
                if(val === 'Claimable') $('#claimFields').show();
            });
        });

        function calculateStats() {
            let partId = $('input[name="part_id"]:checked').val();
            if(!partId) return;
            
            let assignment = activeTruckParts.find(p => p.stock_id == partId);
            if(!assignment) return;
            
            let removeKm = parseFloat($('input[name="km_at_removal"]').val());
            let unassignDateStr = $('input[name="unassign_date"]').val();
            
            // Format DD-MM-YYYY to YYYY-MM-DD for Date parsing
            let uDate = new Date();
            if(unassignDateStr && unassignDateStr.indexOf('-') !== -1) {
                let p = unassignDateStr.split('-');
                if(p[0].length === 2) uDate = new Date(p[2] + '-' + p[1] + '-' + p[0]);
            }
            
            let assignDate = new Date(assignment.assignment_date);
            
            // Calculate Days
            let daysUsed = Math.floor((uDate - assignDate) / (1000 * 60 * 60 * 24));
            if(daysUsed < 0) daysUsed = 0;
            $('#stat_days_used').text(daysUsed + ' days');
            
            // Calculate KM
            let kmUsed = null;
            if(!isNaN(removeKm) && removeKm >= assignment.truck_km_at_assignment) {
                kmUsed = removeKm - assignment.truck_km_at_assignment;
                $('#stat_km_used').text(kmUsed.toLocaleString());
            } else {
                $('#stat_km_used').text('—');
            }
            
            // Calculate Cost per KM
            if(kmUsed > 0 && assignment.effective_cost_snapshot > 0) {
                let costPerKm = assignment.effective_cost_snapshot / kmUsed;
                $('#stat_cost_per_km').text('₹ ' + costPerKm.toFixed(2));
            } else {
                $('#stat_cost_per_km').text('—');
            }
        }

        function submitUnassign() {
            // Reformat dates to YYYY-MM-DD for backend
            let unassignDate = $('input[name="unassign_date"]').val();
            let claimDate = $('input[name="claim_date"]').val();
            let repairDate = $('input[name="repair_date"]').val();
            let scrapDate = $('input[name="scrap_date"]').val();
            
            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]);
            }
            if(claimDate && claimDate.indexOf('-') !== -1) {
                let p = claimDate.split('-');
                if(p[0].length === 2) $('input[name="claim_date"]').val(p[2]+'-'+p[1]+'-'+p[0]);
            }
            if(repairDate && repairDate.indexOf('-') !== -1) {
                let p = repairDate.split('-');
                if(p[0].length === 2) $('input[name="repair_date"]').val(p[2]+'-'+p[1]+'-'+p[0]);
            }
            if(scrapDate && scrapDate.indexOf('-') !== -1) {
                let p = scrapDate.split('-');
                if(p[0].length === 2) $('input[name="scrap_date"]').val(p[2]+'-'+p[1]+'-'+p[0]);
            }
            
            let formData = new FormData($('#formUnassign')[0]);
            $.ajax({
                url: '{{ route("parts-inventory.unassign") }}',
                type: 'POST',
                data: formData,
                processData: false, contentType: false,
                success: function(res) {
                    if(res.success) {
                        swal({
                            title: "Unassigned!",
                            text: res.message,
                            type: "success"
                        }, function() {
                            window.location.href = '{{ route("parts-inventory.unassign-page") }}';
                        });
                    } else {
                        swal("Error", res.message, "error");
                    }
                },
                error: function(err) {
                    swal("Error", err.responseJSON.message || "Something went wrong.", "error");
                }
            });
        }
    </script>
@endpush