@extends('frontend.layouts.app')
@section('frontend_title', 'Tushar Enterprise')

@section('frontend_content')
    <div class="container">
        <div class="row">
            <div class="col-md-3 px-5 py-5 my-5">
                @include('profile.partials.sidebar')
            </div>
            <div class="col-md-9 px-5 py-5 my-5">
                <div class="px-2 py-3 border-1">
                    <form method="POST" action="{{ route('profile.update') }}">
                        @csrf
                        <input type="hidden" name="_method" value="PATCH">
                        <div class="border-b pb-2">
                            <h4 class="">Profile Information</h4>
                            <p>Update your account's profile information and email address.</p>
                        </div>

                        <div class="form-group">
                            <label for="name">Name *</label>
                            <input type="name" class="form-control" id="name" name="name" value="{{ old('name', $user->name) }}" required>
                            @error('name')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="email">Your email address *</label>
                                    <input type="email" class="form-control" id="email" name="email" value="{{ old('email', $user->email) }}" required readonly>
                                    @error('email')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div><!-- End .form-group -->
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="phone">Phone *</label>
                                    <input type="phone" class="form-control" id="phone" name="phone" value="{{ old('phone', $user->phone) }}" required>
                                    @error('phone')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div><!-- End .form-group -->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="email">Select Division</label>
                                    <select class="form-control" name="division_id" id="division_id">
                                        <option value="">Select Division</option>
                                        @isset($divisions)
                                            @foreach ($divisions as $item)
                                                <option value="{{ $item->id }}" {{ old('division_id', $item->id) ? 'selected' : '' }}>{{ $item->name }}</option>
                                            @endforeach
                                        @endisset
                                    </select>
                                    @error('division_id')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div><!-- End .form-group -->
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="email">Select District</label>
                                    <select class="form-control" name="district_id" id="district_id">
                                        <option value="">Select District</option>
                                        {{-- @isset($districts)
                                            @foreach ($districts as $item)
                                                <option value="{{ $item->id }}" {{ old('district_id', $item->id) ? 'selected' : '' }}>{{ $item->name }}</option>
                                            @endforeach
                                        @endisset --}}
                                    </select>
                                    @error('district_id')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div><!-- End .form-group -->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="email">Select Police Station</label>
                                    <select class="form-control" name="thana_id" id="thana_id">
                                        <option value="">Select thana</option>
                                        {{-- @isset($thanas)
                                            @foreach ($thanas as $item)
                                                <option value="{{ $item->id }}" {{ old('thana_id', $item->id) ? 'selected' : '' }}>{{ $item->name }}</option>
                                            @endforeach
                                        @endisset --}}
                                    </select>
                                    @error('thana_id')
                                        <div class="form-text text-danger">{{ $message }}</div>
                                    @enderror
                                </div><!-- End .form-group -->
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="address">Address</label>
                            <input type="address" class="form-control" id="address" name="address" value="{{ old('address', $user->address) }}">
                            @error('address')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->

                        <div class="form-group">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" name="account_policy" value="Vendor" class="custom-control-input" id="account-policy" onchange="
                                var hiddenElement = document.getElementById('hiddenElement');
                                hiddenElement.style.display = this.checked ? 'block' : 'none';
                              ">
                                <label class="custom-control-label" for="account-policy">Vendor Account</label>
                            </div><!-- End .custom-checkbox -->
                        </div><!-- End .form-group -->

                        <div class="form-group" id="hiddenElement" style="display: none" onload="this.style.display = document.getElementById('account-policy').checked ? 'block' : 'none';">
                            <label for="referral-code">Referral Code</label>
                            <input type="text" class="form-control" id="referral-code" name="referral_code">
                            @error('referral_code')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->

                        <div class="form-footer justify-content-between">
                            <button type="submit" class="btn btn-outline-primary-2">
                                <span>Save & Change</span>
                                <i class="icon-long-arrow-right"></i>
                            </button>
                        </div><!-- End .form-footer -->
                    </form>
                </div>

                <div class="px-2 py-3 border-1 mt-5">
                    <form method="POST" action="{{ route('password.update') }}">
                        @csrf
                        <input type="hidden" name="_method" value="PUT">
                        <div class="border-b pb-2">
                            <h4 class="">Update Password</h4>
                            <p>Ensure your account is using a long, random password to stay secure.</p>
                        </div>

                        <div class="form-group">
                            <label for="current_password">Current Password *</label>
                            <div class="position-relative passwordshowhide">
                                <input type="password" class="form-control pe-4" id="current_password" name="current_password" required>
                                <div class="icon" style="position: absolute; top: 50%; transform: translateY(-50%); right: 10px;">
                                    <i class="la la-eye-slash show" style="font-size: 24px; cursor: pointer;"></i>
                                    <i class="la la-eye d-none hide" style="font-size: 24px; cursor: pointer;"></i>
                                </div>
                            </div>
                            @error('current_password', 'updatePassword')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->

                        <div class="form-group">
                            <label for="password">New Password *</label>
                            <div class="position-relative passwordshowhide">
                                <input type="password" class="form-control pe-4" id="password" name="password" required>
                                <div class="icon" style="position: absolute; top: 50%; transform: translateY(-50%); right: 10px;">
                                    <i class="la la-eye-slash show" style="font-size: 24px; cursor: pointer;"></i>
                                    <i class="la la-eye d-none hide" style="font-size: 24px; cursor: pointer;"></i>
                                </div>
                            </div>
                            @error('password', 'updatePassword')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->

                        <div class="form-group">
                            <label for="password_confirmation">Confirm Password *</label>
                            <div class="position-relative passwordshowhide">
                                <input type="password" class="form-control pe-4" id="password_confirmation" name="password_confirmation" required>
                                <div class="icon" style="position: absolute; top: 50%; transform: translateY(-50%); right: 10px;">
                                    <i class="la la-eye-slash show" style="font-size: 24px; cursor: pointer;"></i>
                                    <i class="la la-eye d-none hide" style="font-size: 24px; cursor: pointer;"></i>
                                </div>
                            </div>
                            @error('password_confirmation', 'updatePassword')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->

                        <div class="form-footer justify-content-between">
                            <button type="submit" class="btn btn-outline-primary-2">
                                <span>Save & Change</span>
                                <i class="icon-long-arrow-right"></i>
                            </button>
                        </div><!-- End .form-footer -->
                    </form>
                </div>

                <div class="px-2 py-3 border-1 mt-5">
                    <form method="POST" action="{{ route('profile.destroy') }}">
                        @csrf
                        <input type="hidden" name="_method" value="DELETE">
                        <div class="border-b pb-2">
                            <h4 class="">Are you sure you want to delete your account?</h4>
                            <p>Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.</p>
                        </div>

                        <div class="form-group">
                            <label for="password">Password *</label>
                            <input type="password" class="form-control" id="password" name="password" required>
                            @error('password', 'userDeletion')
                                <div class="form-text text-danger">{{ $message }}</div>
                            @enderror
                        </div><!-- End .form-group -->

                        <div class="form-footer justify-content-between">
                            <button type="submit" class="btn btn-outline-primary-2">
                                <span>Delete Account</span>
                                <i class="icon-long-arrow-right"></i>
                            </button>
                        </div><!-- End .form-footer -->
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('frontend_scripts')
    <script>
        document.getElementById('division_id').addEventListener('change', function() {

            var divisionId = this.value;
            if (divisionId) {
                fetch('/admin/thana/get-districts/' + divisionId)
                    .then(response => response.json())
                    .then(data => {
                        var districtSelect = document.getElementById('district_id');
                        districtSelect.innerHTML = '<option value="" selected="">Select district</option>';
                        data.forEach(function(item) {
                            var option = document.createElement('option');
                            option.value = item.id;
                            option.textContent = item.name;
                            districtSelect.appendChild(option);
                        });
                    });
            } else {
                var districtSelect = document.getElementById('district_id');
                districtSelect.innerHTML = '<option value="" selected="">Select district</option>';
            }
        });

        document.getElementById('district_id').addEventListener('change', function() {
            var districtId = this.value;
            if (districtId) {
                fetch('/admin/area/get-thana/' + districtId)
                    .then(response => response.json())
                    .then(data => {
                        var thanaSelect = document.getElementById('thana_id');
                        thanaSelect.innerHTML = '<option value="" selected="">Select thana</option>';
                        data.forEach(function(item) {
                            var option = document.createElement('option');
                            option.value = item.id;
                            option.textContent = item.name;
                            thanaSelect.appendChild(option);
                        });
                    });
            } else {
                var thanaSelect = document.getElementById('thana_id');
                thanaSelect.innerHTML = '<option value="" selected="">Select area</option>';
            }
        });
    </script>
@endsection