@extends('layouts.app')

@section('title', 'Edit Profile')

@section('content')
    <main id="main">
        <section class="breadcrumbs">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                    <h2>Edit Profile</h2>
                    <ol>
                        <li><a href="{{ route('home.index') }}">Home</a></li>
                        <li><a href="{{ route('profile.index') }}">My Profile</a></li>
                        <li>Edit</li>
                    </ol>
                </div>
            </div>
        </section>

        <section id="blog" class="blog">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 entries">
                        <div class="blog-comments">
                            <div class="reply-form mt-0">
                                @if (session()->has('status'))
                                    <div class="alert alert-success text-center">
                                        {{ session('status') }}
                                    </div>
                                @endif
                                @include('partials.validation-errors', ['displayErrors' => false])
                                <form method="post" enctype="multipart/form-data" action="{{ route('user-profile-information.update') }}">
                                    @method('put')
                                    @csrf
                                    <div class="row">
                                        <div class="col-6 form-group">
                                            <label for="first_name" class="form-label">
                                                First Name <em><small>(<span class="text-danger">required</span>)</small></em>
                                            </label>
                                            <input class="form-control @error('first_name') is-invalid @enderror"
                                                name="first_name"
                                                id="first_name"
                                                type="text"
                                                value="{{ old('first_name', $user->first_name) }}"
                                            />
                                            @error('first_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                        <div class="col-6 form-group">
                                            <label for="last_name" class="form-label">
                                                Last Name <em><small>(<span class="text-danger">required</span>)</small></em>
                                            </label>
                                            <input class="form-control @error('last_name') is-invalid @enderror"
                                                name="last_name"
                                                id="last_name"
                                                type="text"
                                                value="{{ old('last_name', $user->last_name) }}"
                                            />
                                            @error('last_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 form-group">
                                            <label for="email" class="form-label">
                                                E-Mail Address <em><small>(<span class="text-danger">required</span>)</small></em>
                                            </label>
                                            <input class="form-control @error('email') is-invalid @enderror"
                                                name="email"
                                                id="email"
                                                type="email"
                                                value="{{ old('email', $user->email) }}"
                                            />
                                            @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label for="phone" class="form-label">
                                                Phone Number <em><small>(<span class="text-success">optional</span>)</small></em>
                                            </label>
                                            <input class="form-control @error('phone') is-invalid @enderror"
                                                name="phone"
                                                id="phone"
                                                type="phone"
                                                value="{{ old('phone', $user->phone) }}"
                                            />
                                            @error('phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 form-group">
                                            <label for="address_1" class="form-label">
                                                Street Address
                                            </label>
                                            <input class="form-control @error('address_1') is-invalid @enderror"
                                                name="address_1"
                                                id="address_1"
                                                type="text"
                                                value="{{ old('address_1', $user->address_1) }}"
                                            />
                                            @error('address_1') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label for="address_2" class="form-label">Street Address Continued</label>
                                            <input class="form-control @error('address_2') is-invalid @enderror"
                                                name="address_2"
                                                id="address_2"
                                                type="text"
                                                value="{{ old('address_2', $user->address_2) }}"
                                            />
                                            @error('address_2') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 form-group">
                                            <label for="city" class="form-label">
                                                City
                                            </label>
                                            <input class="form-control @error('city') is-invalid @enderror"
                                                name="city"
                                                id="city"
                                                type="text"
                                                value="{{ old('city', $user->city) }}"
                                            />
                                            @error('city') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label for="state_id" class="form-label">
                                                State <em><small>(<span class="text-danger">required</span>)</small></em>
                                            </label>
                                            <select name="state_id" id="state_id" class="form-select @error('state_id') is-invalid @enderror">
                                                <option value=""></option>
                                                @foreach ($states as $state)
                                                    <option value="{{ $state->id }}" {{ old('state_id', $user->state_id) == $state->id ? 'selected="selected"' : '' }}>
                                                        {{ $state->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('state_id') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 form-group">
                                            <label for="zip" class="form-label">
                                                Zip
                                            </label>
                                            <input class="form-control @error('zip') is-invalid @enderror"
                                                name="zip"
                                                id="zip"
                                                type="text"
                                                value="{{ old('zip', $user->zip) }}"
                                            />
                                            @error('zip') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                        <div class="col-6 form-group">
                                            <label for="county_id" class="form-label">
                                                County <em><small>(<span class="text-danger">required</span>)</small></em>
                                            </label>
                                            <select name="county_id" id="county_id" class="form-select @error('county_id') is-invalid @enderror">
                                                <option value=""></option>
                                            </select>
                                            @error('county_id') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 form-group">
                                            <label for="photo" class="form-label">Photo</label>
                                            <p>
                                                <img src="{{ $user->getProfilePhotoUrl() }}" class="img-fluid" alt="Profile Photo" />
                                            </p>
                                            <input class="form-control @error('photo') is-invalid @enderror"
                                                name="photo"
                                                id="photo"
                                                type="file"
                                            />
                                            @error('photo') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-lg btn-primary">
                                        <i class="bi bi-floppy"></i>&nbsp;&nbsp;Save Profile
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="sidebar">
                            <h3 class="sidebar-title">Instructions</h3>
                            <div class="sidebar-item categories">
                                <p>Complete the form below to update your profile.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#phone').inputmask("(999) 999-9999");
        });

        @if($user->state_id)
            let stateId = '{{ $user->state_id }}';
            populateCounties(stateId);
        @endif
        @if($user->county_id)
            let countyId = '{{ $user->county_id }}';
            populateTownships(countyId);
        @endif

        $(document).on('change', '#state_id', function(event) {
            let stateId = $(this).val();
            populateCounties(stateId);
        });

        function populateCounties(stateId) {
            $.ajax({
                method: 'GET',
                url: '{{ route('dashboard.counties') }}',
                data: {
                    state_id: stateId
                }
            }).done(function(response) {
                $('#county_id').empty();
                $.each(response, function(key, element) {
                    $('#county_id').append("<option value='" + element.id +"'>" + element.name + "</option>");
                });
                @if($user->county_id)
                    let countyId = '{{ $user->county_id }}';
                    $('select[name="county_id"]')
                        .find('option[value="' + countyId + '"]')
                        .prop('selected', true);
                @endif
            });
        }

        function populateTownships(countyId) {
            $.ajax({
                method: 'GET',
                url: '{{ route('dashboard.townships') }}',
                data: {
                    county_id: countyId
                }
            }).done(function(response) {
                $('#township_id').empty();
                $.each(response, function(key, element) {
                    $('#township_id').append("<option value='" + element.id +"'>[" + element.zip + "]</option>");
                });
                @if($user->township_id)
                    let townshipId = '{{ $user->township_id }}';
                    $('select[name="township_id"]')
                        .find('option[value="' + townshipId + '"]')
                        .prop('selected', true);
                @endif
            });
        }
    </script>
@endpush