@extends('frontEnd.layouts.master')
@section('title', 'Update Profile')
@section('content')

    <style>
        .customer-section {
            background-color: #f8f9fa;
            padding: 50px 0;
            min-height: 80vh;
        }

        .customer-content {
            background: #fff;
            border-radius: 15px;
            padding: 35px;
            border: none;
        }

        /* Header Style Updated to #2B2D42 */
        .account-title {
            font-weight: 700;
            color: #2B2D42;
            margin-bottom: 30px;
            position: relative;
            padding-bottom: 10px;
        }

        .account-title::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background: #2B2D42;
            /* Updated to Brand Color */
            border-radius: 3px;
        }

        /* Form Styling */
        .form-label {
            font-weight: 600;
            font-size: 0.9rem;
            color: #444;
            margin-bottom: 8px;
        }

        .form-control,
        .select2-container--default .select2-selection--single {
            border: 1px solid #ebedf2;
            border-radius: 10px;
            padding: 12px 15px;
            height: auto;
            background-color: #fcfcfd;
            transition: all 0.3s;
        }

        .form-control:focus {
            border-color: #2B2D42;
            /* Updated to Brand Color */
            box-shadow: 0 0 0 0.2rem rgba(43, 45, 66, 0.1);
            background-color: #fff;
        }

        /* Custom Submit Button Updated */
        .submit-btn {
            background: #2B2D42;
            /* Updated to Brand Color */
            color: #fff;
            border: none;
            padding: 12px 35px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(43, 45, 66, 0.2);
            cursor: pointer;
        }

        .submit-btn:hover {
            background: #1d1e2c;
            /* Darker shade of brand color */
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(43, 45, 66, 0.3);
        }

        /* Image Upload Box */
        .image-upload-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 12px;
            border: 2px dashed #dee2e6;
            transition: border-color 0.3s;
        }

        .image-upload-wrapper:hover {
            border-color: #2B2D42;
        }

        .preview-img {
            width: 70px;
            height: 70px;
            object-fit: cover;
            border-radius: 50%;
            border: 3px solid #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .sticky-top-custom {
            position: -webkit-sticky;
            position: sticky;
            top: 80px;
            z-index: 9;
            height: fit-content;
        }

        @media (max-width: 991px) {
            .sticky-top-custom {
                position: relative;
                top: 0;
            }
        }
    </style>

    <section class="customer-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-4 mb-4 sticky-top-custom">
                    <div class="customer-sidebar">
                        @include('frontEnd.layouts.customer.sidebar')
                    </div>
                </div>

                <div class="col-lg-9 col-md-8">
                    <div class="customer-content shadow-sm">
                        <h5 class="account-title">Profile Update</h5>

                        <form action="{{ route('customer.profile_update') }}" method="POST" class="row g-4"
                            enctype="multipart/form-data" data-parsley-validate="">
                            @csrf

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name" class="form-label">Full Name *</label>
                                    <input type="text" id="name"
                                        class="form-control @error('name') is-invalid @enderror" name="name"
                                        value="{{ $profile_edit->name }}" required placeholder="Enter full name">
                                    @error('name')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="phone" class="form-label">Phone Number *</label>
                                    <input type="number" id="phone"
                                        class="form-control @error('phone') is-invalid @enderror" name="phone"
                                        value="{{ $profile_edit->phone }}" required placeholder="017XXXXXXXX">
                                    @error('phone')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email" class="form-label">Email Address *</label>
                                    <input type="email" id="email"
                                        class="form-control @error('email') is-invalid @enderror" name="email"
                                        value="{{ $profile_edit->email }}" required placeholder="name@example.com">
                                    @error('email')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="address" class="form-label">Address *</label>
                                    <input type="text" id="address"
                                        class="form-control @error('address') is-invalid @enderror" name="address"
                                        value="{{ $profile_edit->address }}" required placeholder="House, Road, Area">
                                    @error('address')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="district" class="form-label">District *</label>
                                    <select id="district"
                                        class="form-control select2 district @error('district') is-invalid @enderror"
                                        name="district" required>
                                        <option value="">Select District</option>
                                        @foreach ($districts as $district)
                                            <option value="{{ $district->district }}"
                                                @if ($profile_edit->district == $district->district) selected @endif>{{ $district->district }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('district')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="area" class="form-label">Area *</label>
                                    <select id="area"
                                        class="form-control area select2 @error('area') is-invalid @enderror" name="area"
                                        required>
                                        <option value="">Select Area</option>
                                        @foreach ($areas as $area)
                                            <option value="{{ $area->id }}"
                                                @if ($profile_edit->area == $area->id) selected @endif>{{ $area->area_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('area')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group">
                                    <label for="image" class="form-label">Profile Image</label>
                                    <div class="image-upload-wrapper">
                                        <img src="{{ asset($profile_edit->image) }}" class="preview-img" alt="Profile"
                                            id="profile-preview">
                                        <div class="flex-grow-1">
                                            <input type="file" id="image"
                                                class="form-control @error('image') is-invalid @enderror" name="image"
                                                onchange="previewFile(this)">
                                            <small class="text-muted mt-1 d-block">Recommended: Square image, max
                                                2MB</small>
                                        </div>
                                    </div>
                                    @error('image')
                                        <span class="invalid-feedback d-block"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-12 mt-4 text-end">
                                <button type="submit" class="submit-btn px-5">Save Changes</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script src="{{ asset('public/frontEnd/') }}/js/parsley.min.js"></script>
    <script src="{{ asset('public/frontEnd/') }}/js/form-validation.init.js"></script>
    <script src="{{ asset('public/frontEnd/') }}/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.select2').select2({
                width: '100%'
            });
        });

        // Instant Image Preview
        function previewFile(input) {
            var file = $("input[type=file]").get(0).files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function() {
                    $("#profile-preview").attr("src", reader.result);
                }
                reader.readAsDataURL(file);
            }
        }

        // Ajax for Area selection
        $('.district').on('change', function() {
            var id = $(this).val();
            $.ajax({
                type: "GET",
                data: {
                    'id': id
                },
                url: "{{ route('districts') }}",
                success: function(res) {
                    if (res) {
                        $(".area").empty();
                        $(".area").append('<option value="">Select Area..</option>');
                        $.each(res, function(key, value) {
                            $(".area").append('<option value="' + key + '" >' + value +
                                '</option>');
                        });
                    } else {
                        $(".area").empty();
                    }
                }
            });
        });
    </script>
@endpush