@extends('layouts.layoutMaster')

@php
    $breadcrumbs = [
        ['link' => 'home', 'name' => 'Home'],
        ['link' => 'javascript:void(0)', 'name' => 'User'],
        ['name' => 'Profile'],
    ];
@endphp

@section('title', 'Profile')


@section('content')

    @if (Laravel\Fortify\Features::canUpdateProfileInformation())
        <div class="mb-6">
            @livewire('profile.update-profile-information-form')
        </div>
    @endif

    @if (auth()->user()->hasRole('Employee'))
        @php
            $country = \App\Models\Country::all();
            $state = \App\Models\State::all();
            $city = \App\Models\City::all();

            $user = \App\Models\User::where('id', Illuminate\Support\Facades\Auth::id())->first();
            $employee = \App\Models\Employee::where('user_id', $user->id)->first();
        @endphp
        {{-- User Information Start --}}
        <div class="card mb-6">
            <h5 class="card-header">Employee Information</h5>
            <form id="employeeForm" class="card-body">
                <meta name="csrf-token" content="{{ csrf_token() }}">
                <h6>1. Personal Details</h6>
                <div class="row g-6">
                    <div class="col-md-3">
                        <div class="form-floating form-floating-outline">
                            <input type="hidden" name="id" value="{{ $employee->id }}">
                            <input type="text" id="name" name="name" class="form-control"
                                value="{{ $employee->name }}" placeholder="Name">
                            <label for="name">Name</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="input-group input-group-merge">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="phone_no" name="phone_no" class="form-control"
                                    value="{{ $employee->phone_no }}" placeholder="Phone No.">
                                <label for="phone_no">Phone No.</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="input-group input-group-merge">
                            <div class="form-floating form-floating-outline">
                                <input type="date" id="dob" name="dob" class="form-control"
                                    value="{{ $employee->dob }}" placeholder="Date of Birth">
                                <label for="dob">Date of Birth</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="input-group input-group-merge">
                            <div class="form-floating form-floating-outline">
                                <select id="gender" name="gender" class="form-select">
                                    <option value="" {{ $employee->gender == '' ? 'selected' : '' }}>Select Gender
                                    </option>
                                    <option value="Male" {{ $employee->gender == 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ $employee->gender == 'Female' ? 'selected' : '' }}>Female
                                    </option>
                                    <option value="Other" {{ $employee->gender == 'Other' ? 'selected' : '' }}>Other
                                    </option>
                                </select>
                                <label for="gender">Gender</label>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row g-6">
                    <div class="col-md-3">
                        <div class="form-floating form-floating-outline">
                            <input type="text" name="adhar_no" id="adhar_no" class="form-control"
                                value="{{ $employee->adhar_no }}" placeholder="Adhar No.">
                            <label for="adhar_no">Adhar No.</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="input-group">
                            <label class="input-group-text" for="adhar_path">Aadhar</label>
                            <input type="file" class="form-control" name="adhar_path" id="adhar_path">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-floating form-floating-outline">
                            <input type="text" name="pan_no" id="pan_no" class="form-control"
                                value="{{ $employee->pan_no }}" placeholder="Pan No.">
                            <label for="pan_no">Pan No.</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="input-group">
                            <label class="input-group-text" for="pan_card_path">Pan</label>
                            <input type="file" class="form-control" name="pan_card_path" id="pan_card_path">
                        </div>
                    </div>
                </div>
                <hr class="my-6 mx-n4">
                <div class="row">
                    <div class="col-md-6">
                        <fieldset>
                            <h6>2. Resedential Address</h6>
                            <div class="row">
                                <div class="col mb-6">
                                    <div class="form-floating form-floating-outline">
                                        <textarea name="resedential_address" id="office_address" class="form-control autosize-demo"
                                            placeholder="Billing Address" rows="2" style="min-height: 70px;">{{ $employee->resedential_address }}</textarea>
                                        <label for="office_address">Address</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col mb-6">
                                    <div class="form-floating form-floating-outline">
                                        {{-- <input type="text" name="country" id="country" class="form-control" placeholder="Country" required /> --}}
                                        <select id="country" name="resedential_country"
                                            class="form-select country select-country">
                                            <option value="">Select Country</option>
                                            @foreach ($country as $c)
                                                <option value="{{ $c->id }}"
                                                    {{ $employee->resedential_country == $c->id ? 'selected' : '' }}>
                                                    {{ $c->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <label for="country">Country</label>
                                    </div>
                                </div>
                                <div class="col mb-6">
                                    <div class="form-floating form-floating-outline">
                                        <select id="state" name="resedential_state"
                                            class="form-select state select-state">
                                            <option value="">Select State</option>
                                            @foreach ($state as $s)
                                                <option value="{{ $s->id }}"
                                                    {{ $employee->resedential_state == $s->id ? 'selected' : '' }}>
                                                    {{ $s->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <label for="state">State</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col mb-6">
                                    <div class="form-floating form-floating-outline">
                                        <select id="city" name="resedential_city"
                                            class="form-select city select-city">
                                            <option value="">Select City</option>
                                            @foreach ($city as $s)
                                                <option value="{{ $s->id }}"
                                                    {{ $employee->resedential_city == $s->id ? 'selected' : '' }}>
                                                    {{ $s->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <label for="city">City</label>
                                    </div>
                                </div>
                                <div class="col mb-6">
                                    <div class="form-floating form-floating-outline">
                                        <input type="text" name="resedential_zipcode" id="zipcode"
                                            value="{{ $employee->resedential_zipcode }}" class="form-control"
                                            placeholder="Zip Code" required />
                                        <label for="zip_code">Zip Code</label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="col-md-6">
                        <fieldset>
                            <h6>3. Permanent Address
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <label style="display: inline; font-size: 14px;">
                                    <input type="checkbox" id="saddress" style="transform: scale(1.3);">
                                    Copy Resedential Address
                                </label>
                            </h6>
                            <div class="row">
                                <div class="col mb-6">
                                    <div class="form-floating form-floating-outline">
                                        <textarea name="permanent_address" id="factory_address" class="form-control autosize-demo"
                                            placeholder="Factory Address" rows="2" style="min-height: 70px;">{{ $employee->permanent_address }}</textarea>
                                        <label for="factory_address"> Address</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col mb-6">
                                    <div class="form-floating form-floating-outline">
                                        <select id="factory_country" name="permanent_country"
                                            class="form-select factory_country select-country">
                                            <option value="">Select Country</option>
                                            @foreach ($country as $c)
                                                <option value="{{ $c->id }}"
                                                    {{ $employee->permanent_country == $c->id ? 'selected' : '' }}>
                                                    {{ $c->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <label for="factory_country">Country</label>
                                    </div>
                                </div>
                                <div class="col mb-6">
                                    <div class="form-floating form-floating-outline">
                                        <select id="factory_state" name="permanent_state"
                                            class="form-select factory_state select-state">
                                            <option value="">Select State</option>
                                            @foreach ($state as $c)
                                                <option value="{{ $c->id }}"
                                                    {{ $employee->permanent_state == $c->id ? 'selected' : '' }}>
                                                    {{ $c->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <label for="factory_state">State</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col mb-6">
                                    <div class="form-floating form-floating-outline">
                                        <select id="factory_city" name="permanent_city"
                                            class="form-select factory_city select-city">
                                            <option value="">Select City</option>
                                            @foreach ($city as $c)
                                                <option value="{{ $c->id }}"
                                                    {{ $employee->permanent_city == $c->id ? 'selected' : '' }}>
                                                    {{ $c->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <label for="factory_city">City</label>
                                    </div>
                                </div>
                                <div class="col mb-6">
                                    <div class="form-floating form-floating-outline">
                                        <input type="text" name="permanent_zipcode" id="factory_zipcode"
                                            value="{{ $employee->permanent_zipcode }}" class="form-control"
                                            placeholder="Factory Zip Code" required />
                                        <label for="factory_zip_code">Zip Code</label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
                <hr class="my-6 mx-n4">
                <h6>3. Other Details</h6>
                <div class="row g-6">
                    <div class="col-md-4">
                        <div class="input-group input-group-merge">
                            <div class="form-floating form-floating-outline">
                                <select id="cast" name="cast" class="form-select">
                                    <option value="" {{ $employee->cast == '' ? 'selected' : '' }}>Select Cast
                                    </option>
                                    <option value="OBC" {{ $employee->cast == 'OBC' ? 'selected' : '' }}>OBC</option>
                                    <option value="General" {{ $employee->cast == 'General' ? 'selected' : '' }}>General
                                    </option>
                                    <option value="SC/ST" {{ $employee->cast == 'SC/ST' ? 'selected' : '' }}>SC/ST
                                    </option>
                                </select>
                                <label for="cast">Cast</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group input-group-merge">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="education" name="education" class="form-control"
                                    value="{{ $employee->education }}" placeholder="Education">
                                <label for="education">Education</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group input-group-merge">
                            <div class="form-floating form-floating-outline">
                                <select id="marital_status" name="marital_status" class="form-select">
                                    <option value="" {{ $employee->marital_status == '' ? 'selected' : '' }}>Select
                                        Marital Status</option>
                                    <option value="Single" {{ $employee->marital_status == 'Single' ? 'selected' : '' }}>
                                        Single</option>
                                    <option value="Married"
                                        {{ $employee->marital_status == 'Married' ? 'selected' : '' }}>Married</option>
                                    <option value="Other" {{ $employee->marital_status == 'Other' ? 'selected' : '' }}>
                                        Other</option>
                                </select>
                                <label for="marital_status">Marital Status</label>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="my-6 mx-n4">
                <h6>4. Insurance Details</h6>
                <div class="row g-6">
                    <div class="col-md-6">
                        <div class="input-group input-group-merge">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="insurance_company" name="insurance_company"
                                    class="form-control" value="{{ $employee->insurance_company }}"
                                    placeholder="Insurance Company">
                                <label for="insurance_company">Insurance Company</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group input-group-merge">
                            <div class="form-floating form-floating-outline">
                                <input type="text" id="insurance_no" name="insurance_no" class="form-control"
                                    value="{{ $employee->insurance_no }}" placeholder="Insurance No.">
                                <label for="insurance_no">Insurance No.</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pt-6">
                    <button type="submit" id="employeeForm"
                        class="btn btn-primary me-4 waves-effect waves-light">Submit</button>
                    <button type="reset" class="btn btn-outline-secondary waves-effect">Cancel</button>
                </div>
            </form>
        </div>
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const resCountry = document.getElementById('country');
                const resState = document.getElementById('state');
                const resCity = document.getElementById('city');
                const resAddress = document.getElementById('office_address');
                const resZip = document.getElementById('zipcode');

                const permCountry = document.getElementById('factory_country');
                const permState = document.getElementById('factory_state');
                const permCity = document.getElementById('factory_city');
                const permAddress = document.getElementById('factory_address');
                const permZip = document.getElementById('factory_zipcode');

                const copyCheckbox = document.getElementById('saddress');

                // Handle copying residential to permanent address
                copyCheckbox.addEventListener('change', function() {
                    if (this.checked) {
                        permAddress.value = resAddress.value;
                        permZip.value = resZip.value;
                        permCountry.value = resCountry.value;

                        // Trigger change event for country to load states
                        permCountry.dispatchEvent(new Event('change'));
                    } else {
                        permAddress.value = '';
                        permZip.value = '';
                        permCountry.value = '';
                        permState.innerHTML = '<option value="">Select State</option>';
                        permCity.innerHTML = '<option value="">Select City</option>';
                    }
                });

                // Populate states and cities dynamically for residential
                resCountry.addEventListener('change', function() {
                    const countryId = this.value;

                    fetch(`/get-states/${countryId}`)
                        .then(response => response.json())
                        .then(data => {
                            resState.innerHTML = '<option value="">Select State</option>';
                            data.forEach(state => {
                                resState.innerHTML +=
                                    `<option value="${state.id}">${state.name}</option>`;
                            });
                        });
                });

                resState.addEventListener('change', function() {
                    const stateId = this.value;

                    fetch(`/get-cities/${stateId}`)
                        .then(response => response.json())
                        .then(data => {
                            resCity.innerHTML = '<option value="">Select City</option>';
                            data.forEach(city => {
                                resCity.innerHTML +=
                                    `<option value="${city.id}">${city.name}</option>`;
                            });
                        });
                });

                // Populate states and cities dynamically for permanent
                permCountry.addEventListener('change', function() {
                    const countryId = this.value;

                    fetch(`/get-states/${countryId}`)
                        .then(response => response.json())
                        .then(data => {
                            permState.innerHTML = '<option value="">Select State</option>';
                            data.forEach(state => {
                                permState.innerHTML +=
                                    `<option value="${state.id}">${state.name}</option>`;
                            });
                        });
                });

                permState.addEventListener('change', function() {
                    const stateId = this.value;

                    fetch(`/get-cities/${stateId}`)
                        .then(response => response.json())
                        .then(data => {
                            permCity.innerHTML = '<option value="">Select City</option>';
                            data.forEach(city => {
                                permCity.innerHTML +=
                                    `<option value="${city.id}">${city.name}</option>`;
                            });
                        });
                });
            });

            document.addEventListener('DOMContentLoaded', function() {
                const saddressCheckbox = document.getElementById('saddress');

                saddressCheckbox.addEventListener('change', function() {
                    if (this.checked) {
                        document.getElementById('factory_address').value = document.getElementById(
                            'office_address').value;
                        document.getElementById('factory_country').value = document.getElementById('country')
                            .value;
                        document.getElementById('factory_state').value = document.getElementById('state').value;
                        document.getElementById('factory_city').value = document.getElementById('city').value;
                        document.getElementById('factory_zipcode').value = document.getElementById('zipcode')
                            .value;
                    } else {
                        document.getElementById('factory_address').value = '';
                        document.getElementById('factory_country').value = '';
                        document.getElementById('factory_state').value = '';
                        document.getElementById('factory_city').value = '';
                        document.getElementById('factory_zipcode').value = '';
                    }
                });
            });

            $(document).ready(function() {
                $('#employeeForm').on('submit', function(e) {
                    e.preventDefault(); // Prevent default form submission

                    // Collect form data
                    let formData = new FormData(this);

                    // Send AJAX request
                    $.ajax({
                        url: '/employees/storeDetails', // Update with your endpoint
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF token
                        },
                        success: function(response) {
                            alert('Employee details saved successfully.');
                            console.log(response);
                            // Optionally redirect or reset the form
                        },
                        error: function(error) {
                            alert('An error occurred while saving employee details.');
                            console.log(error);
                        }
                    });
                });
            });
        </script>

    @endif

    @if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::updatePasswords()))
        <div class="mb-6">
            @livewire('profile.update-password-form')
        </div>
    @endif

    @if (Laravel\Fortify\Features::canManageTwoFactorAuthentication())
        <div class="mb-6">
            @livewire('profile.two-factor-authentication-form')
        </div>
    @endif

    <div class="mb-6">
        @livewire('profile.logout-other-browser-sessions-form')
    </div>

    @if (Laravel\Jetstream\Jetstream::hasAccountDeletionFeatures())
        @livewire('profile.delete-user-form')
    @endif

@endsection