@extends('layouts.user_type.auth')

@section('content')
<div id="loading-overlay" style="display:none;">
    <div class="loader"></div>
</div>
<style>
    #map {
        height: 600px;
    }
    /* Center the date picker */
    .row.justify-content-center {
        margin-top: 20px;
    }

    /* Style for better spacing */
    #date-picker {
        width: 50%;
        margin: 0 auto;
        display: block;
    }
</style>
<div>
    <div class="row">
        <div class="col-12">
            @if(session('status'))
                <div class="m-3 alert alert-success alert-dismissible fade show" id="alert-success" role="alert">
                    <span class="alert-text text-white">{{ session('status') }}</span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                    </button>
                </div>
            @endif
            <div class="card mb-4 mx-4">
                <div class="card-header pb-0">
                    <h5 class="mb-0">{{ isset($employee) ? 'Edit Employee' : 'Create Employee' }}</h5>
                </div>
                <div class="container-fluid py-4">
                    <div class="">
                        <div class="pt-4 p-3">
                            <span class="d-flex justify-content-end">
                                <a href="{{ route('employee.list') }}" class="btn bg-gradient-light btn-md ms-3">
                                    {{ __('Back to Employee List') }}
                                </a>
                            </span>
                            <!-- Bootstrap Tabs -->
                            <ul class="nav nav-tabs" id="employeeTabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="details-tab" data-bs-toggle="tab" href="#details" role="tab" aria-controls="details" aria-selected="true">Employee Details</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="experience-tab" data-bs-toggle="tab" href="#experience" role="tab" aria-controls="experience" aria-selected="false">Work Experience</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="education-tab" data-bs-toggle="tab" href="#education" role="tab" aria-controls="education" aria-selected="false">Education</a>
                                </li>
                                @if(isset($employee) && $employee->id)
                                    <li class="nav-item">
                                        <a class="nav-link" id="leaves-tab" data-bs-toggle="tab" href="#leaves" role="tab" aria-controls="leaves" aria-selected="false">Assigned Leaves</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="geo-location-tab" data-bs-toggle="tab" href="#geo-location" role="tab" aria-controls="geo-location" aria-selected="false">Geo Location</a>
                                    </li>
                                @endif
                            </ul>
                            <form action="{{ isset($employee) ? route('employee.update', $employee->id) : route('employee.store') }}" 
                                method="POST" role="form text-left" enctype="multipart/form-data" id="employee-upload-form">
                                @csrf
                                @if(isset($employee))
                                    @method('PUT')
                                @endif
                                <div class="tab-content" id="employeeTabsContent">
                                    <!-- All Employee Details Tab -->
                                    <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
                                        <div class="card-body pt-4 p-3">
                                            @if($errors->any())
                                                <div class="mt-3 alert alert-primary alert-dismissible fade show" role="alert">
                                                    <span class="alert-text text-white">{{ $errors->first() }}</span>
                                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                                    </button>
                                                </div>
                                            @endif

                                            @if(session('success'))
                                                <div class="m-3 alert alert-success alert-dismissible fade show" id="alert-success" role="alert">
                                                    <span class="alert-text text-white">{{ session('success') }}</span>
                                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                                    </button>
                                                </div>
                                            @endif
                                            <div class="card mb-4 mx-4">
                                                <div class="card-header pb-0">
                                                    <h5 class="mb-0">Basic Info</h5>
                                                </div>
                                                <div class="card-body pt-4 p-3">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="employee-id" class="form-control-label">{{ __('Employee Id') }}</label>
                                                                <input class="form-control" value="{{ old('employee_id', $employee->employee_id ?? '') }}" type="text" placeholder="Employee Id" id="employee-id" name="employee_id">
                                                                @error('employee_id')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="first-name" class="form-control-label">{{ __('First Name') }} <span class="text-danger">*</span></label>
                                                                <input class="form-control" value="{{ old('first_name', $employee->first_name ?? '') }}" type="text" placeholder="First Name" id="first-name" name="first_name">
                                                                @error('first_name')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="middle-name" class="form-control-label">{{ __('Middle Name') }} </label>
                                                                <input class="form-control" value="{{ old('middle_name', $employee->middle_name ?? '') }}" type="text" placeholder="Middle Name" id="middle-name" name="middle_name">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="last-name" class="form-control-label">{{ __('Last Name') }} <span class="text-danger">*</span></label>
                                                                <input class="form-control" value="{{ old('last_name', $employee->last_name ?? '') }}" type="text" placeholder="Last Name" id="last-name" name="last_name">
                                                                @error('last_name')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="employee-email" class="form-control-label">{{ __('Email') }} <span class="text-danger">*</span></label>
                                                                <input class="form-control" value="{{ old('email', $employee->email ?? '') }}" type="email" placeholder="@example.com" id="employee-email" name="email">
                                                                @error('email')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        @if(isset($employee))
                                                        <div class="row">
                                                            <div class="col-md-3">
                                                                <div class="form-group">
                                                                    <label for="added-by" class="form-control-label">{{ __('Added By') }} </label>
                                                                    <p class="text-xs mt-2">{{ $employee->added_by }}</p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <div class="form-group">
                                                                    <label for="added-time" class="form-control-label">{{ __('Added Time') }} </label>
                                                                    <p class="text-xs mt-2">{{ $employee->created_at }}</p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <div class="form-group">
                                                                    <label for="modified-by" class="form-control-label">{{ __('Modified By') }} </label>
                                                                    <p class="text-xs mt-2">{{ $employee->modified_by }}</p>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <div class="form-group">
                                                                    <label for="modified-time" class="form-control-label">{{ __('Modified Time') }} </label>
                                                                    <p class="text-xs mt-2">{{ $employee->updated_at }}</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card mb-4 mx-4">
                                                <div class="card-header pb-0">
                                                    <h5 class="mb-0">Work</h5>
                                                </div>
                                                <div class="card-body pt-4 p-3">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="employee-sign-in-location" class="form-control-label">
                                                                    {{ __('Sign In Location') }} <span class="text-danger">*</span>
                                                                </label>

                                                                @php
                                                                    $savedLocation = old('sign_in_location', $employee->sign_in_location ?? '');
                                                                    $predefined = [
                                                                        '19.88872063745518,75.36867925450616',
                                                                        '19.065966468569965,72.99926801031167',
                                                                        '18.59007007542511,73.74808194495957',
                                                                        '19.888451808729986,75.36930546008806',
                                                                        '19.889078367528413,75.37071098925523',
                                                                        '19.882826498286487,75.3831279864704',
                                                                        '19.870956575122108,75.47779216932956',
                                                                    ];
                                                                    $isCustom = $savedLocation && !in_array($savedLocation, $predefined);
                                                                @endphp

                                                                <select class="form-control" id="sign_in_location" name="sign_in_location_select">
                                                                    <option value="19.88872063745518,75.36867925450616" {{ $savedLocation == '19.88872063745518,75.36867925450616' ? 'selected' : '' }}>Aurangabad Office</option>
                                                                    <option value="19.065966468569965,72.99926801031167" {{ $savedLocation == '19.065966468569965,72.99926801031167' ? 'selected' : '' }}>Mumbai Office</option>
                                                                    <option value="18.59007007542511,73.74808194495957" {{ $savedLocation == '18.59007007542511,73.74808194495957' ? 'selected' : '' }}>Pune Office</option>
                                                                    <option value="19.888451808729986,75.36930546008806" {{ $savedLocation == '19.888451808729986,75.36930546008806' ? 'selected' : '' }}>Strides Solutions</option>
                                                                    <option value="19.889078367528413,75.37071098925523" {{ $savedLocation == '19.889078367528413,75.37071098925523' ? 'selected' : '' }}>Crescendo Lab</option>
                                                                    <option value="19.882826498286487,75.3831279864704" {{ $savedLocation == '19.882826498286487,75.3831279864704' ? 'selected' : '' }}>Chikalthana Warehouse</option>
                                                                    <option value="19.870956575122108,75.47779216932956" {{ $savedLocation == '19.870956575122108,75.47779216932956' ? 'selected' : '' }}>Shendra Factory</option>

                                                                    {{-- Add custom option if DB value is not predefined --}}
                                                                    @if($isCustom)
                                                                        <option value="{{ $savedLocation }}" selected>Custom Location ({{ $savedLocation }})</option>
                                                                    @endif

                                                                    {{-- Always keep Other --}}
                                                                    <option value="other">Other</option>
                                                                </select>

                                                                <!-- Hidden input for actual value -->
                                                                <input type="hidden" name="sign_in_location" id="sign_in_location_hidden" value="{{ $savedLocation }}">

                                                                <!-- Custom Location Field -->
                                                                <div class="mt-2" id="custom_location_container" style="display:none;">
                                                                    <input type="text" class="form-control" id="custom_location" placeholder="e.g. 19.0656063,72.8776564">
                                                                </div>

                                                                @error('sign_in_location')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>

                                                        <!-- Custom Location Field (hidden by default) -->
                                                        <div class="col-md-6" id="custom_location_container" style="display:none;">
                                                            <div class="form-group">
                                                                <label for="custom_location" class="form-control-label">Custom Location (Latitude,Longitude) <span class="text-danger">*</span></label>
                                                                <input type="text" class="form-control" id="custom_location" placeholder="e.g. 19.0656063,72.8776564">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="employee-type" class="form-control-label">{{ __('Employee Type') }} <span class="text-danger">*</span></label>
                                                                <select class="form-control" id="employee_type" name="employee_type">
                                                                    <option value="0" {{ old('employee_type', $employee->employee_type ?? '') == '0' ? 'selected' : '' }}>Normal</option>
                                                                    <option value="1" {{ old('employee_type', $employee->employee_type ?? '') == '1' ? 'selected' : '' }}>Geo type</option>
                                                                </select>
                                                                @error('employee_type')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="range" class="form-control-label">{{ __('Range') }}</label>
                                                                <input class="form-control" value="{{ old('range', $employee->range ?? '') }}" type="number" step="0.01" id="range" name="range">
                                                                @error('range')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <!-- <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="employee-location" class="form-control-label">{{ __('Location') }} <span class="text-danger">*</span></label>
                                                                <input class="form-control" value="{{ old('location', $employee->location ?? '') }}" type="text" id="employee-location" name="location">
                                                                @error('location')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div> -->
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="employee-reporting-manager" class="form-control-label">{{ __('Reporting Manager') }} <span class="text-danger">*</span></label>
                                                                <select class="form-control" id="employee-reporting-manager" name="reporting_manager">
                                                                    <option value="">Select Manager</option>
                                                                    @foreach($managers as $manager)
                                                                        <option value="{{ $manager->id }}" {{ isset($employee) && $employee->reporting_manager == $manager->id ? 'selected' : '' }}>{{ $manager->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                                @error('reporting_manager')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="employee-designation" class="form-control-label">{{ __('Title') }} <span class="text-danger">*</span></label>
                                                                <input class="form-control" value="{{ old('designation', $employee->designation ?? '') }}" type="text" id="employee-designation" name="designation">
                                                                @error('designation')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="employee-department" class="form-control-label">{{ __('Department') }} <span class="text-danger">*</span></label>
                                                                <select class="form-control" id="department" name="department">
                                                                    <option value="">Select Department</option>
                                                                    <option value="Administration" {{ old('department', $employee->department ?? '') == 'Administration' ? 'selected' : '' }}>Administration</option>
                                                                    <option value="Accounts" {{ old('department', $employee->department ?? '') == 'Accounts' ? 'selected' : '' }}>Accounts</option>
                                                                    <option value="B2B Sales" {{ old('department', $employee->department ?? '') == 'B2B Sales' ? 'selected' : '' }}>B2B Sales</option>
                                                                    <option value="Business Partnerships" {{ old('department', $employee->department ?? '') == 'Business Partnerships' ? 'selected' : '' }}>Business Partnerships</option>
                                                                    <option value="CEO Office" {{ old('department', $employee->department ?? '') == 'CEO Office' ? 'selected' : '' }}>CEO's Office</option>
                                                                    <option value="Central Production" {{ old('department', $employee->department ?? '') == 'Central Production' ? 'selected' : '' }}>Central Production</option>
                                                                    <option value="Convenience and Functional Food" {{ old('department', $employee->department ?? '') == 'Convenience and Functional Food' ? 'selected' : '' }}>Convenience and Functional Food</option>
                                                                    <option value="Dairy Division" {{ old('department', $employee->department ?? '') == 'Dairy Division' ? 'selected' : '' }}>Dairy Division</option>
                                                                    <option value="Dispatch" {{ old('department', $employee->department ?? '') == 'Dispatch' ? 'selected' : '' }}>Dispatch</option>
                                                                    <option value="DCM operations" {{ old('department', $employee->department ?? '') == 'DCM operations' ? 'selected' : '' }}>DCM operations</option>
                                                                    <option value="DigiTech" {{ old('department', $employee->department ?? '') == 'DigiTech' ? 'selected' : '' }}>DigiTech</option>
                                                                    <option value="Finance" {{ old('department', $employee->department ?? '') == 'Finance' ? 'selected' : '' }}>Finance</option>
                                                                    <option value="Field Production" {{ old('department', $employee->department ?? '') == 'Field Production' ? 'selected' : '' }}>Field Production</option>
                                                                    <option value="Growth & New Business Creation" {{ old('department', $employee->department ?? '') == 'Growth & New Business Creation' ? 'selected' : '' }}>Growth & New Business Creation</option>
                                                                    <option value="HR" {{ old('department', $employee->department ?? '') == 'HR' ? 'selected' : '' }}>HR</option>
                                                                    <option value="HORECA SALES" {{ old('department', $employee->department ?? '') == 'HORECA SALES' ? 'selected' : '' }}>HORECA SALES</option>
                                                                    <option value="HardTech" {{ old('department', $employee->department ?? '') == 'HardTech' ? 'selected' : '' }}>HardTech</option>
                                                                    <option value="IT" {{ old('department', $employee->department ?? '') == 'IT' ? 'selected' : '' }}>IT</option>
                                                                    <option value="Maintenance" {{ old('department', $employee->department ?? '') == 'Maintenance' ? 'selected' : '' }}>Maintenance</option>
                                                                    <option value="Market Integrated Supply Chain" {{ old('department', $employee->department ?? '') == 'Market Integrated Supply Chain' ? 'selected' : '' }}>Market Integrated Supply Chain</option>
                                                                    <option value="Operation & Logistics" {{ old('department', $employee->department ?? '') == 'Operation & Logistics' ? 'selected' : '' }}>Operation & Logistics</option>
                                                                    <option value="Projects" {{ old('department', $employee->department ?? '') == 'Projects' ? 'selected' : '' }}>Projects</option>
                                                                    <option value="Procurement" {{ old('department', $employee->department ?? '') == 'Procurement' ? 'selected' : '' }}>Procurement</option>
                                                                    <option value="Quality" {{ old('department', $employee->department ?? '') == 'Quality' ? 'selected' : '' }}>Quality</option>
                                                                    <option value="R&D" {{ old('department', $employee->department ?? '') == 'R&D' ? 'selected' : '' }}>R&D</option>
                                                                    <option value="Supply Chain Management" {{ old('department', $employee->department ?? '') == 'Supply Chain Management' ? 'selected' : '' }}>Supply Chain Management</option>
                                                                    <option value="Specialty Food" {{ old('department', $employee->department ?? '') == 'Specialty Food' ? 'selected' : '' }}>Specialty Food</option>
                                                                    <option value="Stores" {{ old('department', $employee->department ?? '') == 'Stores' ? 'selected' : '' }}>Stores</option>
                                                                    <option value="Test Dept" {{ old('department', $employee->department ?? '') == 'Test Dept' ? 'selected' : '' }}>Test Dept</option>
                                                                    <option value="Business Analytics" {{ old('department', $employee->department ?? '') == 'Business Analytics' ? 'selected' : '' }}>Business Analytics</option>
                                                                </select>
                                                                @error('department')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="joining" class="form-control-label">{{ __('Date of Joining') }} <span class="text-danger">*</span></label>
                                                                <input class="form-control" value="{{ old('date_of_joining', $employee->date_of_joining ?? '') }}" type="date" id="date_of_joining" name="date_of_joining">
                                                                @error('date_of_joining')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="joining" class="form-control-label">{{ __('Date of exit') }}</label>
                                                                <input class="form-control" value="{{ old('date_of_exit', $employee->date_of_exit ?? '') }}" type="date" id="date_of_exit" name="date_of_exit">
                                                                @error('date_of_exit')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="Employee status" class="form-control-label">{{ __('Employee status') }}</label>
                                                                <select class="form-control" id="employee_status" name="employee_status">
                                                                    <option value="Active" {{ old('employee_status', $employee->employee_status ?? '') == 'Active' ? 'selected' : '' }}>Active</option>
                                                                    <option value="Disable" {{ old('employee_status', $employee->employee_status ?? '') == 'Disable' ? 'selected' : '' }}>Disable</option>
                                                                </select>
                                                                @error('employee_status')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="employment-type" class="form-control-label">{{ __('Employment Type') }} <span class="text-danger">*</span></label>
                                                                <select class="form-control" id="employment_type" name="employment_type">
                                                                    <option value="">Select Employment Type</option>
                                                                    <option value="Permanent" {{ old('employment_type', $employee->employment_type ?? '') == 'Permanent' ? 'selected' : '' }}>Permanent</option>
                                                                    <option value="On Contract" {{ old('employment_type', $employee->employment_type ?? '') == 'On Contract' ? 'selected' : '' }}>On Contract</option>
                                                                    <option value="Temporary" {{ old('employment_type', $employee->employment_type ?? '') == 'Temporary' ? 'selected' : '' }}>Temporary</option>
                                                                    <option value="Trainee" {{ old('employment_type', $employee->employment_type ?? '') == 'Trainee' ? 'selected' : '' }}>Trainee</option>
                                                                    <option value="Full Time" {{ old('employment_type', $employee->employment_type ?? '') == 'Full Time' ? 'selected' : '' }}>Full Time</option>
                                                                </select>
                                                                @error('employment_type')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card mb-4 mx-4">
                                                <div class="card-header pb-0">
                                                    <h5 class="mb-0">Personal</h5>
                                                </div>
                                                <div class="card-body pt-4 p-3">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="employee-mobile-number" class="form-control-label">{{ __('Mobile Number') }} <span class="text-danger">*</span></label>
                                                                <input class="form-control" value="{{ old('mobile_number', $employee->mobile_number ?? '') }}" type="tel" id="employee-mobile-number" name="mobile_number">
                                                                @error('mobile_number')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="current-address" class="form-control-label">{{ __('Current Address') }}</label>
                                                                <input class="form-control" value="{{ old('current_address', $employee->current_address ?? '') }}" type="text" id="current-address" name="current_address">
                                                                @error('current_address')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="permanent-address" class="form-control-label">{{ __('Permanent Address') }}</label>
                                                                <input class="form-control" value="{{ old('permanent_address', $employee->permanent_address ?? '') }}" type="text" id="permanent-address" name="permanent_address">
                                                                @error('permanent_address')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="personal-email" class="form-control-label">{{ __('Personal Email') }}</label>
                                                                <input class="form-control" value="{{ old('personal_email', $employee->personal_email ?? '') }}" type="email" id="personal-email" name="personal_email">
                                                                @error('personal_email')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="gender" class="form-control-label">{{ __('Gender') }}</label>
                                                                <select class="form-control" id="gender" name="gender">
                                                                    <option value="">Select Gender</option>
                                                                    <option value="Male" {{ old('gender', $employee->gender ?? '') == 'Male' ? 'selected' : '' }}>Male</option>
                                                                    <option value="Female" {{ old('gender', $employee->gender ?? '') == 'Female' ? 'selected' : '' }}>Female</option>
                                                                </select>
                                                                @error('gender')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="dob" class="form-control-label">{{ __('Date of Birth') }}</label>
                                                                <input class="form-control" value="{{ old('dob', $employee->dob ?? '') }}" type="date" id="dob" name="dob">
                                                                @error('dob')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="marital-status" class="form-control-label">{{ __('Marital Status') }}</label>
                                                                <select class="form-control" id="marital-status" name="marital_status">
                                                                    <option value="">Select Marital Status</option>
                                                                    <option value="Married" {{ old('marital_status', $employee->marital_status ?? '') == 'Married' ? 'selected' : '' }}>Married</option>
                                                                    <option value="Single" {{ old('marital_status', $employee->marital_status ?? '') == 'Single' ? 'selected' : '' }}>Single</option>
                                                                </select>
                                                                @error('marital_status')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="father-husband-name" class="form-control-label">{{ __('Father/Husband Name') }}</label>
                                                                <input class="form-control" value="{{ old('father_husband_name', $employee->father_husband_name ?? '') }}" type="text" id="father-husband-name" name="father_husband_name">
                                                                @error('father_husband_name')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="blood-group" class="form-control-label">{{ __('Blood Group') }}</label>
                                                                <input class="form-control" value="{{ old('blood_group', $employee->blood_group ?? '') }}" type="text" id="blood-group" name="blood_group">
                                                                @error('blood_group')
                                                                    <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="passport_size_photo" class="form-control-label">{{ __('Employee Photo') }}</label>
                                                                <input class="form-control" type="file" id="passport_size_photo" name="passport_size_photo">
                                                                @if (isset($employee) && $employee->passport_size_photo)
                                                                    <div class="mt-2" id="preview-container">
                                                                        <img src="{{ asset('storage/' . $employee->passport_size_photo) }}" alt="Passport Photo" style="max-width: 150px; max-height: 50px;">
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Work Experience Tab -->
                                    <div class="card tab-pane fade" id="experience" role="tabpanel" aria-labelledby="experience-tab">
                                        <div class="card-header pb-0">
                                            <h5 class="mb-0">Work Experience</h5>
                                        </div>
                                        <div class="card-body pt-4 p-3">
                                            <div id="experience-container">
                                                @if(isset($employee) && $employee->workExperiences->count() > 0)
                                                    @foreach($employee->workExperiences as $index => $experience)
                                                        <div class="experience-entry border p-3 mb-3">
                                                            <div class="row">
                                                                <input type="hidden" name="work_experience[{{ $index }}][id]" value="{{ $experience->id }}">

                                                                <div class="col-md-2">
                                                                    <div class="form-group">
                                                                        <label>Company Name</label>
                                                                        <input type="text" class="form-control" name="work_experience[{{ $index }}][company_name]" value="{{ $experience->company_name }}" placeholder="Company Name">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <div class="form-group">
                                                                        <label>Job Title</label>
                                                                        <input type="text" class="form-control" name="work_experience[{{ $index }}][job_title]" value="{{ $experience->job_title }}" placeholder="Job Title">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <div class="form-group">
                                                                        <label>From Date</label>
                                                                        <input type="date" class="form-control" name="work_experience[{{ $index }}][from_date]" value="{{ $experience->from_date }}">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <div class="form-group">
                                                                        <label>To Date</label>
                                                                        <input type="date" class="form-control" name="work_experience[{{ $index }}][to_date]" value="{{ $experience->to_date }}">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <div class="form-group">
                                                                        <label>Relevance</label>
                                                                        <input type="text" class="form-control" name="work_experience[{{ $index }}][relevance]" value="{{ $experience->relevance }}" placeholder="Relevance">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <div class="form-group">
                                                                        <label>Job Description</label>
                                                                        <textarea class="form-control" name="work_experience[{{ $index }}][job_description]" placeholder="Job Description">{{ $experience->job_description }}</textarea>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <span class="d-flex justify-content-end">
                                                                <button type="button" class="btn btn-danger btn-sm remove-experience">Remove</button>
                                                            </span>
                                                        </div>
                                                    @endforeach
                                                @else
                                                    {{-- Add a default empty work experience entry when no records exist --}}
                                                    <div class="experience-entry border p-3 mb-3">
                                                        <div class="row">
                                                            <div class="col-md-2">
                                                                <div class="form-group">
                                                                    <label>Company Name</label>
                                                                    <input type="text" class="form-control" name="work_experience[0][company_name]" placeholder="Company Name">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-2">
                                                                <div class="form-group">
                                                                    <label>Job Title</label>
                                                                    <input type="text" class="form-control" name="work_experience[0][job_title]" placeholder="Job Title">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-2">
                                                                <div class="form-group">
                                                                    <label>From Date</label>
                                                                    <input type="date" class="form-control" name="work_experience[0][from_date]">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-2">
                                                                <div class="form-group">
                                                                    <label>To Date</label>
                                                                    <input type="date" class="form-control" name="work_experience[0][to_date]">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-2">
                                                                <div class="form-group">
                                                                    <label>Relevance</label>
                                                                    <input type="text" class="form-control" name="work_experience[0][relevance]" placeholder="Relevance">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-2">
                                                                <div class="form-group">
                                                                    <label>Job Description</label>
                                                                    <textarea class="form-control" name="work_experience[0][job_description]" placeholder="Job Description"></textarea>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <span class="d-flex justify-content-end">
                                                            <button type="button" class="btn btn-danger btn-sm remove-experience">Remove</button>
                                                        </span>
                                                    </div>
                                                @endif
                                            </div>
                                            <button type="button" class="btn btn-primary" id="add-experience">Add More</button>
                                        </div>
                                    </div>
                                    <!-- End Work Experience Tabs -->
                                    <!-- Work Education Tab -->
                                    <div class="card tab-pane fade" id="education" role="tabpanel" aria-labelledby="education-tab">
                                        <div class="card-header pb-0">
                                            <h5 class="mb-0">Education</h5>
                                        </div>
                                        <div class="card-body pt-4 p-3">
                                            <div id="education-container">
                                                @if(isset($employee) && $employee->educations->count() > 0)
                                                    @foreach($employee->educations as $index => $education)
                                                        <div class="education-entry border p-3 mb-3">
                                                            <div class="row">
                                                                <input type="hidden" name="education[{{ $index }}][id]" value="{{ $education->id }}">

                                                                <div class="col-md-2">
                                                                    <div class="form-group">
                                                                        <label>School Name</label>
                                                                        <input type="text" class="form-control" name="education[{{ $index }}][school_name]" value="{{ $education->school_name }}" placeholder="School Name">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <div class="form-group">
                                                                        <label>Degree/Diploma</label>
                                                                        <input type="text" class="form-control" name="education[{{ $index }}][degree_diploma]" value="{{ $education->degree_diploma }}" placeholder="Degree/Diploma">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <div class="form-group">
                                                                        <label>Field(s) of Study</label>
                                                                        <input type="text" class="form-control" name="education[{{ $index }}][fields_of_study]" value="{{ $education->fields_of_study }}" placeholder="Field(s) of Study">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <div class="form-group">
                                                                        <label>Date of Completion</label>
                                                                        <input type="date" class="form-control" name="education[{{ $index }}][date_of_completion]" value="{{ $education->date_of_completion }}">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <div class="form-group">
                                                                        <label>Interests</label>
                                                                        <input type="text" class="form-control" name="education[{{ $index }}][interests]" value="{{ $education->interests }}" placeholder="interests">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-2">
                                                                    <div class="form-group">
                                                                        <label>Additional Notes</label>
                                                                        <textarea class="form-control" name="education[{{ $index }}][additional_notes]" placeholder="Additional Notes">{{ $education->additional_notes }}</textarea>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <span class="d-flex justify-content-end">
                                                                <button type="button" class="btn btn-danger btn-sm remove-education">Remove</button>
                                                            </span>
                                                        </div>
                                                    @endforeach
                                                @else
                                                    {{-- Add a default empty work education entry when no records exist --}}
                                                    <div class="education-entry border p-3 mb-3">
                                                        <div class="row">
                                                            <div class="col-md-2">
                                                                <div class="form-group">
                                                                    <label>School Name</label>
                                                                    <input type="text" class="form-control" name="education[0][school_name]" placeholder="School Name">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-2">
                                                                <div class="form-group">
                                                                    <label>Degree/Diploma</label>
                                                                    <input type="text" class="form-control" name="education[0][degree_diploma]" placeholder="Degree/Diploma">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-2">
                                                                <div class="form-group">
                                                                    <label>Field(s) of Study</label>
                                                                    <input type="text" class="form-control" name="education[0][fields_of_study]" placeholder="Field(s) of Study">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-2">
                                                                <div class="form-group">
                                                                    <label>Date of Completion</label>
                                                                    <input type="date" class="form-control" name="education[0][date_of_completion]">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-2">
                                                                <div class="form-group">
                                                                    <label>Interests</label>
                                                                    <input type="text" class="form-control" name="education[0][interests]" placeholder="interests">
                                                                </div>
                                                            </div>

                                                            <div class="col-md-2">
                                                                <div class="form-group">
                                                                    <label>Additional Notes</label>
                                                                    <textarea class="form-control" name="education[0][additional_notes]" placeholder="Additional Notes"></textarea>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <span class="d-flex justify-content-end">
                                                            <button type="button" class="btn btn-danger btn-sm remove-education">Remove</button>
                                                        </span>
                                                    </div>
                                                @endif
                                            </div>
                                            <button type="button" class="btn btn-primary" id="add-education">Add More</button>
                                        </div>
                                    </div>
                                    <!-- End Education Tabs -->
                                    <!-- Assigned Leaves Tab -->
                                    <div class="tab-pane fade" id="leaves" role="tabpanel" aria-labelledby="leaves-tab">
                                        <!-- Add fields for assigned leaves here -->
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="card mb-4">
                                                    <div class="card-body">
                                                        <div class="table table-bordered">
                                                            @if(isset($employee) && $employee->assignedLeaves->isNotEmpty())
                                                                <table class="table">
                                                                    <thead>
                                                                        <tr>
                                                                        <th class="text-center">Leave Type</th>
                                                                        <th class="text-center">Allocated Leaves</th>
                                                                        <th class="text-center">Used Leaves</th>
                                                                        <th class="text-center">Remaining Leaves</th>
                                                                        <th class="text-center"></th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach($employee->assignedLeaves as $leave)
                                                                        <tr>
                                                                            <td class="text-center">{{ $leave->leaveType->name }}</td>
                                                                            <td class="text-center">{{ $leave->allocated_leaves }}</td>
                                                                            <td class="text-center">{{ $leave->used_leaves }}</td>
                                                                            <td class="text-center">{{ $leave->remaining_leaves }}</td>
                                                                        </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            @else
                                                                <p class="text-muted">No assigned leaves for this employee.</p>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="geo-location" role="tabpanel" aria-labelledby="geo-location-tab">
                                        <div class="row justify-content-center mb-3">
                                            <div class="col-md-4 text-center">
                                                <label for="date-picker" class="form-label">Select Date:</label>
                                                <input type="date" id="date-picker" class="form-control">
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div id="map"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn bg-gradient-dark btn-md mt-4 mb-4">
                                        {{ isset($employee) ? 'Update Employee' : 'Create Employee' }}
                                    </button>
                                </div>
                            </form>
                            <!-- End Tabs -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@if(isset($employee) && $employee->id)
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([19.0760, 72.8777], 13); 

        // Add tile layer (OpenStreetMap)

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

        // Fix for Bootstrap tabs: Invalidate map size when the tab is shown
        document.addEventListener("DOMContentLoaded", function () {
            document.getElementById("geo-location-tab").addEventListener("shown.bs.tab", function () {
                setTimeout(() => {
                    map.invalidateSize();
                }, 300);
            });
        });

        let employeeId = "{{ $employee->id }}"; // Get employee ID from Blade
        const employeeLocationsUrl = "{{ url('employee/locations') }}/" + employeeId;
        // const url = `${employeeLocationsUrl}?date=${selectedDate}`;

        function getDirectionsData(selectedDate) {
            var url = `${employeeLocationsUrl}?date=${selectedDate}`;
            const originIcon = L.icon({
                    iconUrl: '{{ asset('assets/img/origin.png') }}',
                    iconSize: [25, 41],
                    iconAnchor: [12, 41],
                    popupAnchor: [1, -34],
                    shadowSize: [41, 41]
                });
                const destinationIcon = L.icon({
                    iconUrl: '{{ asset('assets/img/destination.png') }}',
                    iconSize: [25, 41],
                    iconAnchor: [12, 41],
                    popupAnchor: [1, -34],
                    shadowSize: [41, 41]
                });
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        console.log("Error: " + data.error);
                    } else {
                        var allLatLngs = []; // Collect all points for global fitBounds

                        // Loop through the routes and draw each polyline
                        data.routes.forEach(function(route) {
                            var latlngs = route.overview_path.map(function(point) {
                                return [point.lat, point.lng];
                            });

                            // Add all points to the global bounds array
                            allLatLngs = allLatLngs.concat(latlngs);

                            // Draw the polyline for the route
                            L.polyline(latlngs, { color: 'blue' }).addTo(map);

                            // Optionally, add markers at the origin and destination
                            L.marker(latlngs[0], { icon: originIcon }).addTo(map).bindPopup("Origin: " + route.origin);
                            L.marker(latlngs[latlngs.length - 1], { icon: destinationIcon }).addTo(map).bindPopup("Destination: " + route.destination);
                        });

                        // **Set map bounds to include all route points**
                        if (allLatLngs.length > 0) {
                            var latlngBounds = L.latLngBounds(allLatLngs);
                            map.fitBounds(latlngBounds, { padding: [100, 100], maxZoom: 10 }); // Adjust padding & limit max zoom
                        }
                    }
                })
            .catch(error => console.error("Fetch Error:", error));
        }

        // Set today's date in the date picker
        let today = new Date().toISOString().split('T')[0];
        document.getElementById("date-picker").value = today;

        getDirectionsData(today);

        document.getElementById("date-picker").addEventListener("change", function () {
            getDirectionsData(this.value);
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Set today's date in the date picker
            let today = new Date().toISOString().split('T')[0];
            document.getElementById("date-picker").value = today;
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const tabs = document.querySelectorAll('.nav-link');
            const submitButton = document.querySelector('button[type="submit"]');
            const geoLocationTab = document.getElementById('geo-location-tab');
            const employeeTypeSelect = document.getElementById('employee_type');

            function checkActiveTab() {
                const activeTab = document.querySelector('.tab-pane.active');
                const allowedTabs = ['details', 'experience', 'education'];
                
                if (activeTab && allowedTabs.includes(activeTab.id)) {
                    submitButton.style.display = 'block';
                } else {
                    submitButton.style.display = 'none';
                }
            }

            function toggleGeoLocationTab() {
                if (employeeTypeSelect.value === '1') {
                    geoLocationTab.style.display = 'block';
                } else {
                    geoLocationTab.style.display = 'none';
                }
            }

            tabs.forEach(tab => {
                tab.addEventListener('shown.bs.tab', checkActiveTab);
            });

            // Listen for employee type changes
            employeeTypeSelect.addEventListener('change', toggleGeoLocationTab);

            checkActiveTab();
            toggleGeoLocationTab();
        });
    </script>
@endif

<script>
    document.getElementById('passport_size_photo').addEventListener('change', function (event) {
        const file = event.target.files[0];
        const preview = document.createElement('img');
        preview.style.maxWidth = '150px';
        preview.style.maxHeight = '50px';

        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                preview.src = e.target.result;
                document.getElementById('preview-container').innerHTML = '';
                document.getElementById('preview-container').appendChild(preview);
            };
            reader.readAsDataURL(file);
        }
    });
</script>
<script>
    document.getElementById('add-experience').addEventListener('click', function() {
        let container = document.getElementById('experience-container');
        let experienceEntries = container.getElementsByClassName('experience-entry');

        // Find the next available index by checking existing indexes
        let indexes = Array.from(experienceEntries).map(entry => {
            let firstInput = entry.querySelector('input, textarea');
            let match = firstInput ? firstInput.getAttribute('name').match(/\[(\d+)\]/) : null;
            return match ? parseInt(match[1]) : -1;
        }).filter(index => index >= 0).sort((a, b) => a - b);

        // Determine the next available index
        let newIndex = indexes.length ? indexes[indexes.length - 1] + 1 : 0;

        // Clone the first experience entry
        let newEntry = experienceEntries[0].cloneNode(true);

        // Clear input values and update name attributes with the correct new index
        newEntry.querySelectorAll('input, textarea').forEach(input => {
            input.value = ''; // Clear values
            let name = input.getAttribute('name');
            if (name) {
                name = name.replace(/\[\d+\]/, `[${newIndex}]`); // Assign the correct new index
                input.setAttribute('name', name);
            }
        });

        container.appendChild(newEntry);
    });

    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-experience')) {
            let experienceEntries = document.querySelectorAll('.experience-entry');
            if (experienceEntries.length > 1) {
                e.target.closest('.experience-entry').remove();
            }
        }
    });
</script>
<script>
    document.getElementById('add-education').addEventListener('click', function() {
        let container = document.getElementById('education-container');
        let educationEntries = container.getElementsByClassName('education-entry');

        // Find the next available index by checking existing indexes
        let indexes = Array.from(educationEntries).map(entry => {
            let firstInput = entry.querySelector('input, textarea');
            let match = firstInput ? firstInput.getAttribute('name').match(/\[(\d+)\]/) : null;
            return match ? parseInt(match[1]) : -1;
        }).filter(index => index >= 0).sort((a, b) => a - b);

        // Determine the next available index
        let newIndex = indexes.length ? indexes[indexes.length - 1] + 1 : 0;

        // Clone the first education entry
        let newEntry = educationEntries[0].cloneNode(true);

        // Clear input values and update name attributes with the correct new index
        newEntry.querySelectorAll('input, textarea').forEach(input => {
            input.value = ''; // Clear values
            let name = input.getAttribute('name');
            if (name) {
                name = name.replace(/\[\d+\]/, `[${newIndex}]`); // Assign the correct new index
                input.setAttribute('name', name);
            }
        });

        container.appendChild(newEntry);
    });

    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-education')) {
            let educationEntries = document.querySelectorAll('.education-entry');
            if (educationEntries.length > 1) {
                e.target.closest('.education-entry').remove();
            }
        }
    });

    document.addEventListener("DOMContentLoaded", function () {
    const signinLocation = document.getElementById("sign_in_location");
    const hiddenInput = document.getElementById("sign_in_location_hidden");
    const customContainer = document.getElementById("custom_location_container");
    const customInput = document.getElementById("custom_location");

    // Show/hide custom location
    signinLocation.addEventListener("change", function () {
        if (this.value === "other") {
            customContainer.style.display = "block";
            customInput.setAttribute("required", "required");
            hiddenInput.value = ""; // clear hidden input
        } else {
            customContainer.style.display = "none";
            customInput.removeAttribute("required");
            customInput.value = "";
            hiddenInput.value = this.value; // regular option
        }
    });

    // On submit, set hidden input value
    signinLocation.form.addEventListener("submit", function (e) {
        if (signinLocation.value === "other") {
            if (customInput.value.trim() === "") {
                e.preventDefault();
                alert("Custom location is required");
                customInput.focus();
                return false;
            }
            hiddenInput.value = customInput.value.trim(); // set hidden input
        }
    });

    // Initialize hidden input on page load
    if (signinLocation.value !== "other") {
        hiddenInput.value = signinLocation.value;
    } else if (customInput.value.trim() !== "") {
        hiddenInput.value = customInput.value.trim();
    }
});


</script>

@endsection