@extends('adminlte::page')

@section('title', config('adminlte.title') . ' | Edit Profile')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Edit Profile</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('profile.index') }}">Profile</a></li>
                    <li class="breadcrumb-item active">Edit</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <style>
        .iti {
            width: 100%;
        }

        #telno,
        #mobno {
            width: 100% !important;
        }

        /* Better responsive card layouts */
        @media (max-width: 767px) {
            .card-deck {
                display: block;
            }
            .card-deck .card {
                margin-bottom: 15px;
            }
        }

        /* Improve form readability */
        .form-group label {
            font-weight: 500;
            color: #495057;
        }

        .form-control:focus {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .required-label::after {
            content: " *";
            color: #dc3545;
        }
    </style>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h5>Validation Errors</h5>
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('profile.update', $myuser->id) }}" method="POST" id="profileForm">
                        @csrf
                        @method('PUT')

                        {{-- Navigation --}}
                        <div class="d-grid gap-1 d-sm-flex justify-content-sm-between">
                            <a href="{{ route('profile.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Back</a>
                            <button type="submit" class="btn btn-primary btn-primary">
                                <i class="fa fa-save"></i>
                                Update
                            </button>
                        </div>

                        <hr class="bg-secondary">

                        {{-- Main Content Card --}}
                        <div class="card shadow-sm">
                            <div class="card-header bg-light">
                                <div class="row">
                                    <div class="col-sm text-left">
                                        <h4 class="card-title">
                                            {{ $myuser->employee_ref }} - {{ $myuser->name }}
                                        </h4>
                                    </div>
                                    <div class="col-sm-auto ms-auto text-muted">
                                        Last updated: {{ date('l, j F Y H:i', strtotime($myuser->updated_at)) }} UTC
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                {{-- Personal Information & Contact Details --}}
                                <div class="card-deck mb-3">
                                    <div class="card shadow-sm">
                                        <div class="card-header bg-light">
                                            <h4 class="card-title">Basic Information</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <label for="title" class="required-label">Title</label>
                                                <select name="title" class="form-control" id="title" required>
                                                    <option value="">Select your title...</option>
                                                    <option value="Mr" {{ old('title', $myuser->title) == 'Mr' ? 'selected' : '' }}>Mr</option>
                                                    <option value="Mrs" {{ old('title', $myuser->title) == 'Mrs' ? 'selected' : '' }}>Mrs</option>
                                                    <option value="Ms" {{ old('title', $myuser->title) == 'Ms' ? 'selected' : '' }}>Ms</option>
                                                    <option value="Miss" {{ old('title', $myuser->title) == 'Miss' ? 'selected' : '' }}>Miss</option>
                                                    <option value="Dr" {{ old('title', $myuser->title) == 'Dr' ? 'selected' : '' }}>Dr</option>
                                                    <option value="Prof" {{ old('title', $myuser->title) == 'Prof' ? 'selected' : '' }}>Prof</option>
                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <label for="name" class="required-label">Full Name</label>
                                                <input type="text" name="name" id="name" class="form-control"
                                                       placeholder="Enter your full name" value="{{ old('name', $myuser->name) }}" required>
                                            </div>

                                            <div class="form-group">
                                                <label for="maritalstatus">Marital Status</label>
                                                <select name="marital_status" class="form-control" id="maritalstatus">
                                                    <option value="">Please Choose Marital Status</option>
                                                    <option value="Single" {{ old('marital_status', $myuser->marital_status) == 'Single' ? 'selected' : '' }}>Single</option>
                                                    <option value="Married/Civil Partner" {{ old('marital_status', $myuser->marital_status) == 'Married/Civil Partner' ? 'selected' : '' }}>Married/Civil Partner</option>
                                                    <option value="Separated" {{ old('marital_status', $myuser->marital_status) == 'Separated' ? 'selected' : '' }}>Separated</option>
                                                    <option value="Divorced" {{ old('marital_status', $myuser->marital_status) == 'Divorced' ? 'selected' : '' }}>Divorced</option>
                                                    <option value="Widowed" {{ old('marital_status', $myuser->marital_status) == 'Widowed' ? 'selected' : '' }}>Widowed</option>
                                                    <option value="Not Disclosed" {{ old('marital_status', $myuser->marital_status) == 'Not Disclosed' ? 'selected' : '' }}>Not Disclosed</option>
                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <label for="gender">Gender</label>
                                                <select name="gender" class="form-control" id="gender">
                                                    <option value="">Please Choose your Gender</option>
                                                    <option value="Male" {{ old('gender', $myuser->gender) == 'Male' ? 'selected' : '' }}>Male</option>
                                                    <option value="Female" {{ old('gender', $myuser->gender) == 'Female' ? 'selected' : '' }}>Female</option>
                                                    <option value="Non-Binary" {{ old('gender', $myuser->gender) == 'Non-Binary' ? 'selected' : '' }}>Non-Binary</option>
                                                    <option value="Gender Queer" {{ old('gender', $myuser->gender) == 'Gender Queer' ? 'selected' : '' }}>Gender Queer</option>
                                                    <option value="Gender Fluid" {{ old('gender', $myuser->gender) == 'Gender Fluid' ? 'selected' : '' }}>Gender Fluid</option>
                                                    <option value="Transgender" {{ old('gender', $myuser->gender) == 'Transgender' ? 'selected' : '' }}>Transgender</option>
                                                    <option value="Not Disclosed" {{ old('gender', $myuser->gender) == 'Not Disclosed' ? 'selected' : '' }}>Not Disclosed</option>
                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <label for="dob">Date of Birth</label>
                                                <input type="date" name="dob" id="dob" class="form-control"
                                                       value="{{ old('dob', $myuser->dob) }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card shadow-sm">
                                        <div class="card-header bg-light">
                                            <h4 class="card-title">Contact Details</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <label for="email">Work Email</label>
                                                <input type="email" name="email" id="email" class="form-control"
                                                       value="{{ old('email', $myuser->email) }}" disabled>
                                                <small class="form-text text-muted">Your work email cannot be changed here</small>
                                            </div>

                                            <div class="form-group">
                                                <label for="personalEmail">Personal Email</label>
                                                <input type="email" name="personal_email" id="personalEmail" class="form-control"
                                                       placeholder="your.email@example.com" value="{{ old('personal_email', $myuser->personal_email) }}">
                                                <small class="form-text text-muted">Optional - for personal communications</small>
                                            </div>

                                            <div class="form-group">
                                                <label for="telNo">Telephone Number</label>
                                                <input type="tel" name="tel_no" id="telNo" class="form-control"
                                                       placeholder="Office/Home telephone" value="{{ old('tel_no', $myuser->tel_no) }}">
                                            </div>

                                            <div class="form-group mb-0">
                                                <label for="mobNo">Mobile Number</label>
                                                <input type="tel" name="mob_no" id="mobNo" class="form-control"
                                                       placeholder="Mobile number" value="{{ old('mob_no', $myuser->mob_no) }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Address --}}
                                <div class="card shadow-sm mb-3">
                                    <div class="card-header bg-light">
                                        <h4 class="card-title">Address</h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="postcode">Post Code</label>
                                                    <div class="input-group">
                                                        <input type="text" name="postcode" id="postcode" class="form-control"
                                                               placeholder="Enter postcode" value="{{ old('postcode', $myuser->postcode) }}">
                                                        <div class="input-group-append">
                                                            <button type="button" id="postcodebutton" class="btn btn-primary">
                                                                Find Address
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <small class="form-text text-muted">Enter your postcode to automatically find your address</small>
                                                </div>

                                                <div id="postcodemsg" class="alert alert-danger alert-dismissible fade show" role="alert" style="display:none;">
                                                    <strong>Error:</strong> Please enter a valid postcode.
                                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>

                                                <div id="populateaddress" class="form-group" style="display:none;">
                                                    <label for="foundaddress">Select Address</label>
                                                    <select name="foundaddress" id="foundaddress" class="form-control">
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="address1">Address Line 1</label>
                                                    <input type="text" name="address1" id="address1" class="form-control"
                                                           placeholder="Street address" value="{{ old('address1', $myuser->address1) }}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="address2">Address Line 2</label>
                                                    <input type="text" name="address2" id="address2" class="form-control"
                                                           placeholder="Apartment, suite, etc." value="{{ old('address2', $myuser->address2) }}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="address3">Address Line 3</label>
                                                    <input type="text" name="address3" id="address3" class="form-control"
                                                           placeholder="Additional address info" value="{{ old('address3', $myuser->address3) }}">
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="town">Town/City</label>
                                                    <input type="text" name="town" id="town" class="form-control"
                                                           placeholder="Town or City" value="{{ old('town', $myuser->town) }}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="country">Country</label>
                                                    <input type="text" class="form-control" name="country" id="country" list="countryList"
                                                           placeholder="Type to search country" value="{{ old('country', $myuser->country) }}">
                                                    <datalist id="countryList">
                                                        @foreach ($countryNames as $countryName)
                                                            <option value="{{ $countryName->country }}">
                                                        @endforeach
                                                    </datalist>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Diversity Information --}}
                                <div class="card-deck mb-3">
                                    <div class="card shadow-sm">
                                        <div class="card-header bg-light">
                                            <h4 class="card-title">Diversity</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <label for="nationally">Nationality</label>
                                                <input type="text" class="form-control" name="nationally" id="nationally"
                                                       list="nationallyList" placeholder="Type to search nationality"
                                                       value="{{ old('nationally', $myuser->nationally) }}">
                                                <datalist id="nationallyList">
                                                    @foreach ($nationallyNames as $nationallyName)
                                                        <option value="{{ $nationallyName }}">
                                                    @endforeach
                                                </datalist>
                                            </div>

                                            <div class="form-group">
                                                <label for="disability">Disability</label>
                                                <select name="disability" class="form-control" id="disability">
                                                    <option value="">Please select</option>
                                                    <option value="0" {{ old('disability', $myuser->disability) == '0' ? 'selected' : '' }}>No</option>
                                                    <option value="1" {{ old('disability', $myuser->disability) == '1' ? 'selected' : '' }}>Yes</option>
                                                </select>
                                            </div>

                                            <div class="form-group mb-0">
                                                <label for="ethnicity">Ethnicity</label>
                                                <select name="ethnicity" class="form-control" id="ethnicity">
                                                    <option value="">Please Choose your Ethnicity</option>
                                                    <option value="White British" {{ old('ethnicity', $myuser->ethnicity) === 'White British' ? 'selected' : '' }}>White British</option>
                                                    <option value="White (other)" {{ old('ethnicity', $myuser->ethnicity) === 'White (other)' ? 'selected' : '' }}>White (other)</option>
                                                    <option value="White Irish" {{ old('ethnicity', $myuser->ethnicity) === 'White Irish' ? 'selected' : '' }}>White Irish</option>
                                                    <option value="Mixed race" {{ old('ethnicity', $myuser->ethnicity) === 'Mixed race' ? 'selected' : '' }}>Mixed race</option>
                                                    <option value="Indian" {{ old('ethnicity', $myuser->ethnicity) === 'Indian' ? 'selected' : '' }}>Indian</option>
                                                    <option value="Pakistani" {{ old('ethnicity', $myuser->ethnicity) === 'Pakistani' ? 'selected' : '' }}>Pakistani</option>
                                                    <option value="Bangladeshi" {{ old('ethnicity', $myuser->ethnicity) === 'Bangladeshi' ? 'selected' : '' }}>Bangladeshi</option>
                                                    <option value="Other Asian (non-Chinese)" {{ old('ethnicity', $myuser->ethnicity) === 'Other Asian (non-Chinese)' ? 'selected' : '' }}>Other Asian (non-Chinese)</option>
                                                    <option value="Black Caribbean" {{ old('ethnicity', $myuser->ethnicity) === 'Black Caribbean' ? 'selected' : '' }}>Black Caribbean</option>
                                                    <option value="Black African" {{ old('ethnicity', $myuser->ethnicity) === 'Black African' ? 'selected' : '' }}>Black African</option>
                                                    <option value="Black (other)" {{ old('ethnicity', $myuser->ethnicity) === 'Black (other)' ? 'selected' : '' }}>Black (other)</option>
                                                    <option value="Latin American" {{ old('ethnicity', $myuser->ethnicity) === 'Latin American' ? 'selected' : '' }}>Latin American</option>
                                                    <option value="Chinese" {{ old('ethnicity', $myuser->ethnicity) === 'Chinese' ? 'selected' : '' }}>Chinese</option>
                                                    <option value="Other" {{ old('ethnicity', $myuser->ethnicity) === 'Other' ? 'selected' : '' }}>Other</option>
                                                    <option value="Not Disclosed" {{ old('ethnicity', $myuser->ethnicity) === 'Not Disclosed' ? 'selected' : '' }}>Not Disclosed</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card shadow-sm">
                                        <div class="card-header bg-light">
                                            <h4 class="card-title">Religion & Orientation</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <label for="religion">Religion</label>
                                                <select name="religion" class="form-control" id="religion">
                                                    <option value="">Please Choose your Religion</option>
                                                    <option value="African Traditional & Diasporic" {{ old('religion', $myuser->religion) == 'African Traditional & Diasporic' ? 'selected' : '' }}>African Traditional & Diasporic</option>
                                                    <option value="Agnostic" {{ old('religion', $myuser->religion) == 'Agnostic' ? 'selected' : '' }}>Agnostic</option>
                                                    <option value="Atheist" {{ old('religion', $myuser->religion) == 'Atheist' ? 'selected' : '' }}>Atheist</option>
                                                    <option value="Baha'i" {{ old('religion', $myuser->religion) == 'Baha\'i' ? 'selected' : '' }}>Baha'i</option>
                                                    <option value="Buddhism" {{ old('religion', $myuser->religion) == 'Buddhism' ? 'selected' : '' }}>Buddhism</option>
                                                    <option value="Cao Dai" {{ old('religion', $myuser->religion) == 'Cao Dai' ? 'selected' : '' }}>Cao Dai</option>
                                                    <option value="Chinese traditional religion" {{ old('religion', $myuser->religion) == 'Chinese traditional religion' ? 'selected' : '' }}>Chinese traditional religion</option>
                                                    <option value="Christianity" {{ old('religion', $myuser->religion) == 'Christianity' ? 'selected' : '' }}>Christianity</option>
                                                    <option value="Hinduism" {{ old('religion', $myuser->religion) == 'Hinduism' ? 'selected' : '' }}>Hinduism</option>
                                                    <option value="Islam" {{ old('religion', $myuser->religion) == 'Islam' ? 'selected' : '' }}>Islam</option>
                                                    <option value="Jainism" {{ old('religion', $myuser->religion) == 'Jainism' ? 'selected' : '' }}>Jainism</option>
                                                    <option value="Juche" {{ old('religion', $myuser->religion) == 'Juche' ? 'selected' : '' }}>Juche</option>
                                                    <option value="Judaism" {{ old('religion', $myuser->religion) == 'Judaism' ? 'selected' : '' }}>Judaism</option>
                                                    <option value="Neo-Paganism" {{ old('religion', $myuser->religion) == 'Neo-Paganism' ? 'selected' : '' }}>Neo-Paganism</option>
                                                    <option value="Nonreligious" {{ old('religion', $myuser->religion) == 'Nonreligious' ? 'selected' : '' }}>Nonreligious</option>
                                                    <option value="Rastafarianism" {{ old('religion', $myuser->religion) == 'Rastafarianism' ? 'selected' : '' }}>Rastafarianism</option>
                                                    <option value="Secular" {{ old('religion', $myuser->religion) == 'Secular' ? 'selected' : '' }}>Secular</option>
                                                    <option value="Shinto" {{ old('religion', $myuser->religion) == 'Shinto' ? 'selected' : '' }}>Shinto</option>
                                                    <option value="Sikhism" {{ old('religion', $myuser->religion) == 'Sikhism' ? 'selected' : '' }}>Sikhism</option>
                                                    <option value="Spiritism" {{ old('religion', $myuser->religion) == 'Spiritism' ? 'selected' : '' }}>Spiritism</option>
                                                    <option value="Tenrikyo" {{ old('religion', $myuser->religion) == 'Tenrikyo' ? 'selected' : '' }}>Tenrikyo</option>
                                                    <option value="Unitarian-Universalism" {{ old('religion', $myuser->religion) == 'Unitarian-Universalism' ? 'selected' : '' }}>Unitarian-Universalism</option>
                                                    <option value="Zoroastrianism" {{ old('religion', $myuser->religion) == 'Zoroastrianism' ? 'selected' : '' }}>Zoroastrianism</option>
                                                    <option value="primal-indigenous" {{ old('religion', $myuser->religion) == 'primal-indigenous' ? 'selected' : '' }}>primal-indigenous</option>
                                                    <option value="Other" {{ old('religion', $myuser->religion) == 'Other' ? 'selected' : '' }}>Other</option>
                                                    <option value="Not Disclosed" {{ old('religion', $myuser->religion) == 'Not Disclosed' ? 'selected' : '' }}>Not Disclosed</option>
                                                </select>
                                            </div>

                                            <div class="form-group mb-0">
                                                <label for="sexorientation">Sexual Orientation</label>
                                                <select name="sexorientation" class="form-control" id="sexorientation">
                                                    <option value="">Please Choose your Sexual Orientation</option>
                                                    <option value="Heterosexual" {{ old('sexorientation', $myuser->sexorientation) == 'Heterosexual' ? 'selected' : '' }}>Heterosexual</option>
                                                    <option value="Homosexual" {{ old('sexorientation', $myuser->sexorientation) == 'Homosexual' ? 'selected' : '' }}>Homosexual</option>
                                                    <option value="Bisexual" {{ old('sexorientation', $myuser->sexorientation) == 'Bisexual' ? 'selected' : '' }}>Bisexual</option>
                                                    <option value="Asexual" {{ old('sexorientation', $myuser->sexorientation) == 'Asexual' ? 'selected' : '' }}>Asexual</option>
                                                    <option value="Not Disclosed" {{ old('sexorientation', $myuser->sexorientation) == 'Not Disclosed' ? 'selected' : '' }}>Not Disclosed</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('js/postcode-lookup.js') }}"></script>
    <script>
        // International Telephone Input
        const inputHome = document.querySelector("#telNo");
        const inputMobile = document.querySelector("#mobNo");
        if (inputHome) {
            window.intlTelInput(inputHome, {
                placeholderNumberType: 'FIXED_LINE',
                utilsScript: "/intl-tel-input/js/utils.js"
            });
        }
        if (inputMobile) {
            window.intlTelInput(inputMobile, {
                placeholderNumberType: 'MOBILE',
                utilsScript: "/intl-tel-input/js/utils.js"
            });
        }

        // Track form changes
        let formChanged = false;
        const form = document.getElementById('profileForm');
        const formElements = form.querySelectorAll('input, select, textarea');

        formElements.forEach(element => {
            element.addEventListener('change', function() {
                formChanged = true;
            });
        });

        // Warn on unsaved changes
        window.addEventListener('beforeunload', function (e) {
            if (formChanged) {
                e.preventDefault();
                e.returnValue = '';
            }
        });

        // Don't warn when submitting the form
        form.addEventListener('submit', function() {
            formChanged = false;
        });

        // Postcode lookup
        new PostcodeLookup({
            routeUrl: "{{ route('postcode.process') }}"
        });

        // Add smooth icon rotation on collapse toggle
        $('#diversityCollapse').on('show.bs.collapse hide.bs.collapse', function() {
            $(this).prev().find('h4').attr('aria-expanded', function(i, attr) {
                return attr == 'true' ? 'false' : 'true';
            });
        });
    </script>
@stop

@section('footer')
    &nbsp;
@stop