@extends('layout.app')
@section('title', 'Create 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</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Create Job Card</li>
        </ol>
    </div>

    <div class="app-body">
        <div class="row gx-3">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Job Card Details</h5>
                    </div>
                    <div class="card-body">
                        {!! Form::open(['route' => 'job-card.store', 'method' => 'POST']) !!}
                        <div class="row gx-3">
                            <div class="col-md-3 mb-3">
                                <label class="form-label" for="job_card_no">Job Card No <span class="text-danger">*</span></label>
                                {!! Form::text('job_card_no', $jobCardNo, ['class' => 'form-control', 'required']) !!}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label" for="date">Date <span class="text-danger">*</span></label>
                                {!! Form::text('date', date('d-m-Y'), ['class' => 'form-control datepicker', 'required', 'id' => 'date']) !!}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label" for="vehicle_id">Vehicle <span class="text-danger">*</span></label>
                                {!! Form::select('vehicle_id', ['' => '-- Select Vehicle --'] + $vehicles, null, [
                                    'class' => 'form-control select2',
                                    'id' => 'vehicle_id',
                                    'required'
                                ]) !!}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label" for="driver_id">Driver</label>
                                {!! Form::select('driver_id', ['' => '-- Select Driver --'] + $drivers, null, ['class' => 'form-control select2']) !!}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label" for="km_reading">KM Reading</label>
                                {!! Form::number('km_reading', null, ['class' => 'form-control', 'id' => 'km_reading']) !!}
                            </div>
                            
                            <div class="col-md-12 mb-3">
                                <label class="form-label">Work Type</label>
                                <div class="d-flex flex-wrap gap-3 mt-1">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="work_type[]" value="Routine Service" id="routine">
                                        <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="Engine Work" id="engine">
                                        <label class="form-check-label" for="engine">Engine Work</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="work_type[]" value="Electrical" id="electrical">
                                        <label class="form-check-label" for="electrical">Electrical</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="work_type[]" value="Body Work" id="body">
                                        <label class="form-check-label" for="body">Body Work</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="work_type[]" value="Other" id="other_check">
                                        <label class="form-check-label" for="other_check">Other</label>
                                    </div>
                                </div>
                                <input type="text" name="work_type_other" id="other_text" class="form-control mt-2 d-none" placeholder="Please specify other work type">
                            </div>
                        </div>

                        <div class="row gx-3 mt-4">
                            <div class="col-md-12">
                                <h6 class="mb-3">Maintenance Details (Parts & Labor)</h6>
                                <table class="table table-bordered table-sm">
                                    <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">
                                        <tr class="item-row">
                                            <td class="text-center sr-no">1</td>
                                            <td><input type="text" name="items[0][description]" class="form-control form-control-sm" required></td>
                                            <td><input type="text" name="items[0][parts_used]" class="form-control form-control-sm"></td>
                                            <td><input type="number" name="items[0][qty]" class="form-control form-control-sm text-end qty"></td>
                                            <td><input type="text" name="items[0][mechanic]" class="form-control form-control-sm"></td>
                                            <td><input type="number" step="0.01" name="items[0][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 invisible">
                                                    <i class="ri-delete-bin-line"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr class="table-light fw-bold">
                                            <td colspan="5" class="text-end">Total Amount:</td>
                                            <td class="text-end" id="total-amount">0.00</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..."></textarea>
                        </div>

                        <div class="col-12 mt-4 text-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="ri-save-line"></i> Submit
                            </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 = 1;

            // 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));
            }

            // Toggle "Other" text input
            $('#other_check').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#other_text').removeClass('d-none');
                } else {
                    $('#other_text').addClass('d-none');
                }
            });
        });
    </script>
@endpush