@extends('layout.app')
@section('title', 'Register Employee/Driver')
@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">

@endpush
@section('content')
    <div class="app-hero-header d-flex align-items-center mb-0">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('employee.index') }}">Employee List</a></li>
            <li class="breadcrumb-item active" aria-current="page">Register Employee/Driver</li>
        </ol>
    </div>

    <div class="app-body">
        <div class="card-body">
            <div class="row gx-3">
                <div class="col-sm-12">
                    <div class="card mb-3">
                        <div class="card-body">
                            {!! Form::open([
                                'route' => ['employee.store'],
                                'id' => 'employeeForm',
                                'method' => 'post',
                                'autocomplete' => 'off',
                                'files' => true,
                                'class' => 'row g-3 needs-validation'
                            ]) !!}
                            
                            <div class="col-12">
            <!-- STEP 1 -->
            <div id="step-1">
                <h5 class="mb-3 text-primary"><i class="ri-user-line"></i> 1. Personal Info</h5>
                <hr>
                <div class="row g-4">
                    <div class="col-md-6">
                        <label class="form-label">Employee Type <span class="text-danger">*</span></label>
                        {!! Form::select('emp_type', ['' => '--Select--', 'employee' => 'Employee', 'driver' => 'Driver'], old('emp_type'), ['class' => 'form-control select2', 'id' => 'emp_type', 'required']) !!}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Employee Code <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="emp_code" required readonly value="{{ $count + 1 < 10 ? 'EMP/' . date('Y') . '/00' . ($count + 1) : 'EMP/' . date('Y') . '/0' . ($count + 1) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Employee Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="employee_name" placeholder="Enter full name" required value="{{ old('employee_name') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Father's Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="father_name" placeholder="Enter father's name" required value="{{ old('father_name') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Mobile Number <span class="text-danger">*</span></label>
                        <input type="text" class="form-control number" name="mobile_no" placeholder="10-digit mobile no" minlength="10" maxlength="10" required value="{{ old('mobile_no') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Alternate Mobile Number</label>
                        <input type="text" class="form-control number" name="alt_mobile_no" placeholder="Alternate mobile no" minlength="10" maxlength="10" value="{{ old('alt_mobile_no') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Date of Birth</label>
                        <input type="text" class="form-control datepicker" name="dob" placeholder="dd - mm - yyyy" value="{{ old('dob') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Blood Group</label>
                        {!! Form::select('blood_group', ['' => '--Select--', 'A+' => 'A+', 'A-' => 'A-', 'B+' => 'B+', 'B-' => 'B-', 'AB+' => 'AB+', 'AB-' => 'AB-', 'O+' => 'O+', 'O-' => 'O-'], old('blood_group'), ['class' => 'form-control select2']) !!}
                    </div>
                    <div class="col-12">
                        <label class="form-label">Current Address <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="address" rows="3" placeholder="House no, Street name, Village/City, State, Zipcode" required>{{ old('address') }}</textarea>
                    </div>
                    <!-- Hidden fields for legacy support -->
                    <input type="hidden" name="country" value="India">
                    <input type="hidden" name="state_id" value="1">
                    <input type="hidden" name="city" value="Unknown">
                    
                    <div class="col-md-6">
                        <label class="form-label">Aadhaar Number</label>
                        <input type="text" class="form-control number" name="aadhaar_card_no" placeholder="XXXX-XXXX-XXXX" minlength="12" maxlength="12" value="{{ old('aadhaar_card_no') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">PAN Number (Optional)</label>
                        <input type="text" class="form-control" name="pan_card_no" placeholder="ABCDE1234F" minlength="10" maxlength="10" value="{{ old('pan_card_no') }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Emergency Contact Info</label>
                        <input type="text" class="form-control" name="emergency_contact" placeholder="e.g., Sunita Devi (Wife) - 9876543211" value="{{ old('emergency_contact') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Photo Upload</label>
                        <input type="file" class="form-control" name="emp_img" accept="image/*">
                    </div>
                </div>
            </div>

            </div>

            <!-- STEP 2 -->
            <div id="step-2" class="col-12 mt-4" style="display: none;">
                <h5 class="mb-3 text-primary"><i class="ri-shield-check-line"></i> 2. License Details</h5>
                <hr>
                <div class="row g-4">
                    <div class="col-md-6">
                        <label class="form-label">Driving License Number</label>
                        <input type="text" class="form-control" name="driving_licence_no" placeholder="DL-XXXXXXXXXXXXX" value="{{ old('driving_licence_no') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Experience (Years)</label>
                        <input type="number" class="form-control" name="experience_years" placeholder="5" value="{{ old('experience_years') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">License Issue Date</label>
                        <input type="text" class="form-control datepicker" name="license_issue_date" placeholder="dd - mm - yyyy" value="{{ old('license_issue_date') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">License Expiry Date</label>
                        <input type="text" class="form-control datepicker" name="driving_licence_valid_upto" placeholder="dd - mm - yyyy" value="{{ old('driving_licence_valid_upto') }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label">License Class</label>
                        <div class="checkbox-group d-flex gap-4 p-3 bg-light rounded border">
                            <label class="custom-checkbox"><input type="radio" name="license_class" value="LMV"> LMV</label>
                            <label class="custom-checkbox"><input type="radio" name="license_class" value="HMV"> HMV</label>
                            <label class="custom-checkbox"><input type="radio" name="license_class" value="TRANS"> TRANS</label>
                            <label class="custom-checkbox"><input type="radio" name="license_class" value="HGMV"> HGMV</label>
                        </div>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Previous Employer (Optional)</label>
                        <input type="text" class="form-control" name="previous_employer" placeholder="Enter former company name" value="{{ old('previous_employer') }}">
                    </div>
                </div>
            </div>

            <!-- STEP 3 -->
            <div id="step-3" class="col-12 mt-4">
                <h5 class="mb-3 text-primary"><i class="ri-briefcase-line"></i> <span id="employment-details-num">3</span>. Employment Details</h5>
                <hr>
                <div class="row g-4">
                    <div class="col-md-6">
                        <label class="form-label">Joining Date <span class="text-danger">*</span></label>
                        <input type="text" class="form-control datepicker" name="joining_date" required value="{{ old('joining_date', \Carbon\Carbon::parse($financialYearStart)->format('d-M-Y')) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Salary (Monthly INR)</label>
                        <input type="text" class="form-control number" name="salary" placeholder="25000" value="{{ old('salary') }}">
                    </div>
                    
                    <div class="col-12" id="driverRulesBox" style="display: none;">
                        <div class="info-box">
                            <i class="ri-sparkling-line"></i>
                            <div>
                                <h5>Business Rule Complied:</h5>
                                <p>Newly registered drivers default to the status <strong>Unassigned</strong> and are ready for fleet allocation. They automatically appear on the Driver List upon submission.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Documents Table fallback -->
                <div class="mt-4 pt-4 border-top">
                    <h6 class="form-label mb-3">Document Uploads (Optional)</h6>
                    <table class="table table-bordered table-sm" id="doc_table">
                        <thead class="table-light">
                            <tr>
                                <th>Document Type</th>
                                <th>File</th>
                                <th><button type="button" id="addrow" class="btn btn-sm btn-primary"><i class="ri-add-line"></i></button></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="text" class="form-control" name="doc_type[]" value="Aadhar Card" readonly></td>
                                <td><input type="file" class="form-control" name="doc_img[]"></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-12 mt-4">
            <div class="d-flex align-items-center justify-content-end gap-2">
                <a href="{{ route('employee.index') }}" class="btn btn-secondary" id="btnCancel">Cancel</a>
                <button type="submit" class="btn btn-primary" id="btnSubmit">Register Employee</button>
            </div>
        </div>
        {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(".datepicker").each(function() {
                var options = {
                    singleDatePicker: true,
                    showDropdowns: true,
                    minDate: '01-Jan-1900',
                    locale: { format: "DD-MMM-YYYY" }
                };
                if ($(this).attr('name') !== 'driving_licence_valid_upto') {
                    options.maxDate = new Date();
                } else {
                    options.minDate = new Date(); // Driving license valid upto should be future date
                }
                $(this).daterangepicker(options);
            });

            $('.number').keyup(function(e) {
                if (/\D/g.test(this.value)) {
                    this.value = this.value.replace(/\D/g, '');
                }
            });

            // Change button text based on emp_type
            $('#emp_type').change(function() {
                if($(this).val() === 'driver') {
                    $('#btnSubmit').text('Register Driver');
                    $('#driverRulesBox').show();
                    $('#step-2').show();
                    $('#employment-details-num').text('3');
                } else {
                    $('#btnSubmit').text('Register Employee');
                    $('#driverRulesBox').hide();
                    $('#step-2').hide();
                    $('#employment-details-num').text('2');
                }
            });
            // trigger on load
            $('#emp_type').trigger('change');
            
            let i = 2;
            $('#addrow').click(function() {
                var newRow = $("<tr>");
                var cols = "";
                cols += '<td><input class="form-control" type="text" name="doc_type[]" placeholder="Document Name" required></td>';
                cols += '<td><input class="form-control" type="file" name="doc_img[]" required></td>';
                cols += '<td><button type="button" class="btn btn-danger btn-sm delbtn"><i class="ri-delete-bin-line"></i></button></td>';
                newRow.append(cols);
                $("#doc_table").append(newRow);
            });

            $("#doc_table").on("click", ".delbtn", function() {
                $(this).closest('tr').remove();
            });
        });
    </script>
@endpush