@extends('layout.app')
@section('title', 'Edit Job Card')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
@endpush

@section('content')
    <div class="app-hero-header d-flex align-items-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="javascript:void(0);">Vehicle Maintenance</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ route('job-card.index') }}">Job Card List</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Edit Job Card</li>
        </ol>
        <div class="ms-auto d-lg-flex flex-row">
            <div class="d-flex flex-row gap-1">
                <a href="{{ route('job-card.index') }}" class="btn btn-sm btn-outline-primary">
                    <i class="ri-skip-back-line"></i> Back
                </a>
            </div>
        </div>
    </div>

    <div class="app-body">
        <div class="row gx-3">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        {!! Form::model($jobCard, ['route' => ['job-card.update', $jobCard->id], 'method' => 'PUT', 'class' => 'row g-3']) !!}
                        
                        {{-- Header Section --}}
                        <div class="col-md-3">
                            <label class="form-label" for="job_card_no">Job Card No. <span class="text-danger">*</span></label>
                            <input type="text" name="job_card_no" id="job_card_no" value="{{ $jobCard->job_card_no }}" class="form-control" readonly>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label" for="vehicle_id">Truck No. <span class="text-danger">*</span></label>
                            {!! Form::select('vehicle_id', ['' => '-- Select Truck --'] + $vehicles, null, [
                                'class' => 'form-control select2',
                                'id' => 'vehicle_id',
                                'required'
                            ]) !!}
                        </div>

                        <div class="col-md-3">
                            <label class="form-label" for="driver_id">Driver Name <span class="text-danger">*</span></label>
                            {!! Form::select('driver_id', ['' => '-- Select Driver --'] + $drivers, null, [
                                'class' => 'form-control select2',
                                'id' => 'driver_id',
                                'required'
                            ]) !!}
                        </div>

                        <div class="col-md-3">
                            <label class="form-label" for="date">Date <span class="text-danger">*</span></label>
                            <input type="text" name="date" id="date" value="{{ date('d-m-Y', strtotime($jobCard->date)) }}" class="form-control datepicker" required>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label" for="km_reading">Km Reading</label>
                            <input type="number" name="km_reading" id="km_reading" value="{{ $jobCard->km_reading }}" class="form-control" placeholder="Enter KM Reading">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label d-block">Type of Work</label>
                            @php
                                $workTypes = is_string($jobCard->work_type) ? explode(',', $jobCard->work_type) : ($jobCard->work_type ?? []);
                            @endphp
                            <div class="d-flex gap-3 mt-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="work_type[]" value="Routine Service" id="routine" {{ in_array('Routine Service', $workTypes) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="routine">Routine Service</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="work_type[]" value="Breakdown" id="breakdown" {{ in_array('Breakdown', $workTypes) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="breakdown">Breakdown</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="work_type[]" value="Repair" id="repair" {{ in_array('Repair', $workTypes) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="repair">Repair</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="work_type[]" value="Other" id="work_other" {{ in_array('Other', $workTypes) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="work_other">Other</label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label" for="status">Status</label>
                            {!! Form::select('status', ['Open' => 'Open', 'Closed' => 'Closed'], null, [
                                'class' => 'form-control select2',
                                'id' => 'status'
                            ]) !!}
                        </div>

                        {{-- Work Details Table --}}
                        <div class="col-sm-12 mt-4">
                            <h6 class="text-primary mb-3">Work Details</h6>
                            <div class="table-responsive">
                                <table class="table table-bordered align-middle" id="items-table">
                                    <thead class="table-light text-center font-size-12">
                                        <tr>
                                            <th width="60">Sr No</th>
                                            <th>Description</th>
                                            <th>Parts Used</th>
                                            <th width="100">Qty</th>
                                            <th>Mechanic</th>
                                            <th width="150">Amount</th>
                                            <th width="60">
                                                <button type="button" class="btn btn-success btn-sm add-row">
                                                    <i class="ri-add-line"></i>
                                                </button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="items-body">
                                        @foreach($jobCard->items as $index => $item)
                                        <tr class="item-row">
                                            <td class="text-center sr-no">{{ $index + 1 }}</td>
                                            <td><input type="text" name="items[{{ $index }}][description]" value="{{ $item->description }}" class="form-control form-control-sm" required></td>
                                            <td><input type="text" name="items[{{ $index }}][parts_used]" value="{{ $item->parts_used }}" class="form-control form-control-sm"></td>
                                            <td><input type="number" name="items[{{ $index }}][qty]" value="{{ $item->qty }}" class="form-control form-control-sm text-end qty"></td>
                                            <td><input type="text" name="items[{{ $index }}][mechanic]" value="{{ $item->mechanic }}" class="form-control form-control-sm"></td>
                                            <td><input type="number" step="0.01" name="items[{{ $index }}][amount]" value="{{ $item->amount }}" class="form-control form-control-sm text-end amount"></td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-danger btn-sm remove-row {{ $index == 0 ? 'invisible' : '' }}">
                                                    <i class="ri-delete-bin-line"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr class="table-light fw-bold">
                                            <td colspan="5" class="text-end">Total Amount:</td>
                                            <td class="text-end" id="total-amount">{{ number_format($jobCard->items->sum('amount'), 2) }}</td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>

                        <div class="col-md-12 mt-3">
                            <label class="form-label" for="remarks">Remarks</label>
                            <textarea name="remarks" id="remarks" rows="3" class="form-control" placeholder="Enter remarks if any...">{{ $jobCard->remarks }}</textarea>
                        </div>

                        <div class="col-12 mt-4 text-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="ri-save-line"></i> Update Job Card
                            </button>
                        </div>

                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Initialize the theme date picker
            $('.datepicker').daterangepicker({
                singleDatePicker: true,
                autoUpdateInput: true,
                locale: {
                    format: 'DD-MM-YYYY'
                }
            });
            let rowIdx = {{ count($jobCard->items) }};

            // Add Row
            $('.add-row').on('click', function() {
                let html = `
                    <tr class="item-row">
                        <td class="text-center sr-no">${rowIdx + 1}</td>
                        <td><input type="text" name="items[${rowIdx}][description]" class="form-control form-control-sm" required></td>
                        <td><input type="text" name="items[${rowIdx}][parts_used]" class="form-control form-control-sm"></td>
                        <td><input type="number" name="items[${rowIdx}][qty]" class="form-control form-control-sm text-end qty"></td>
                        <td><input type="text" name="items[${rowIdx}][mechanic]" class="form-control form-control-sm"></td>
                        <td><input type="number" step="0.01" name="items[${rowIdx}][amount]" class="form-control form-control-sm text-end amount"></td>
                        <td class="text-center">
                            <button type="button" class="btn btn-danger btn-sm remove-row">
                                <i class="ri-delete-bin-line"></i>
                            </button>
                        </td>
                    </tr>
                `;
                $('#items-body').append(html);
                rowIdx++;
                updateSrNos();
                calculateTotal();
            });

            // Remove Row
            $(document).on('click', '.remove-row', function() {
                $(this).closest('tr').remove();
                updateSrNos();
                calculateTotal();
            });

            // Update Sr Nos
            function updateSrNos() {
                $('#items-body tr').each(function(index) {
                    $(this).find('.sr-no').text(index + 1);
                });
            }

            // Calculate Total
            $(document).on('input', '.amount', function() {
                calculateTotal();
            });

            function calculateTotal() {
                let total = 0;
                $('.amount').each(function() {
                    let val = parseFloat($(this).val()) || 0;
                    total += val;
                });
                $('#total-amount').text(total.toFixed(2));
            }
        });
    </script>
@endpush