@extends('frontend.layouts.main-profile')

@section('title', $seo['title'] ?? '' )
@section('keywords', $seo['keywords']??'')
@section('description', $seo['description']??'')
@section('abstract', $seo['abstract']??'')
@section('image', $seo['image']??'')
@section('css')
<style>
    .avatar-upload-box {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }

    .avatar-label {
        font-weight: 600;
    }

    .avatar-input-wrapper {
        position: relative;
        display: inline-block;
    }

    .avatar-input {
        display: none;
        /* Ẩn input file thật */
    }

    .avatar-preview {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        /* Bo tròn */
        overflow: hidden;
        cursor: pointer;
        border: 2px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.3s;
    }

    .avatar-preview:hover {
        border-color: #3490dc;
    }

    .avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .avatar-error {
        color: red;
        margin-top: 4px;
        font-size: 13px;
    }
</style>
@endsection
@section('content')
<div class="content-wrapper">
    <div class="main">

        <div class="wrap-content-main">
            <div class="">
                <div class="">
                    @if ($errors->any())
                    <div class="alert alert-danger" style="color: red; margin-bottom: 20px;">
                        <ul style="margin: 0; padding-left: 20px;">
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    @if (session('success'))
                    <div class="alert alert-success" style="color: green; margin-bottom: 20px;">
                        {{ session('success') }}
                    </div>
                    @endif
                    <form action="{{route('profile.updateInfo', ['id'=>$data->id])}}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card card-outline card-primary">
                            <div class="card-header">
                                <h3 class="card-title">{{__('common.Hồ sơ cá nhân')}}</h3>
                            </div>
                            <div class="card-body table-responsive">
                                <div class="my-account">
                                    <div class="avatar-upload-box">
                                        <div class="avatar-label">
                                            <span>Ảnh đại diện <i class="required">*</i></span>
                                        </div>
                                        <div class="avatar-input-wrapper">
                                            <input type="file" id="avatarInput" name="avatar_path" class="avatar-input" accept="image/*">
                                            <div class="avatar-preview" id="avatarPreview">
                                                <img src="{{ $data->avatar_path ? asset($data->avatar_path) : asset('admin_asset/images/upload-image.png') }}"
                                                    alt="Avatar" class="avatar-img">
                                            </div>

                                            @error('avatar_path')
                                            <div class="avatar-error">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>


                                    <div class="account-gr">
                                        <div class="customer-left">
                                            {{__('common.Họ Tên')}}
                                            <i class="required">*</i>
                                        </div>
                                        <div class="customer-right">
                                            <input type="text" class="tr-valid @error('name') is-invalid @enderror"
                                                value="{{old('name')?? $data->name }}" name="name" required>
                                            @error('name')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="account-gr">
                                        <div class="customer-left">
                                            {{__('common.Email')}}
                                            <i class="required">*</i>
                                        </div>
                                        <div class="customer-right">
                                            <input type="email" name="email"
                                                class="tr-valid @error('email') is-invalid @enderror"
                                                value="{{old('email')?? $data->email }}"
                                                placeholder="{{__('common.Email')}}" required>
                                            @error('email')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="account-gr">
                                        <div class="customer-left">
                                            {{__('common.Số điện thoại')}}
                                            <i class="required">*</i>
                                        </div>
                                        <div class="customer-right">
                                            <input type="tel" name="phone"
                                                class="tr-valid @error('phone') is-invalid @enderror"
                                                value="{{ old('phone')?? $data->phone }}"
                                                placeholder="{{__('common.Số điện thoại')}}" required>
                                            @error('phone')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>


                                    <div class="account-gr">
                                        <div class="customer-left">
                                            {{__('common.Địa chỉ')}}
                                            <i class="required">*</i>
                                        </div>
                                        <div class="customer-right">
                                            <div class="address-list-wrapper" style="display: flex; flex-direction: column; gap: 10px;">
                                                <input type="text" name="address" class="tr-valid " value="{{ old('address')?? $data->address }}" placeholder="Địa chỉ">
                                            </div>
                                            {{--
                                                    <div class="address-list-wrapper" style="display: flex; flex-direction: column; gap: 10px;">
                                                        @foreach ($addresses as $address)
                                                        <div class="address-item" style="border: 1px solid #ccc; border-radius: 8px; padding: 10px; display: flex; justify-content: space-between; align-items: center;">
                                                            <label style="flex-grow: 1; display: flex; gap: 10px; align-items: center;">
                                                                <input type="radio" name="address_id" value="{{ $address->id }}" required
                                            @if(old('address_id', optional($defaultAddress)->id) == $address->id) checked @endif>
                                            <div>
                                                {{ $address->address_detail }},
                                                {{ $address->commune->name ?? '' }},
                                                {{ $address->district->name ?? '' }},
                                                {{ $address->city->name ?? '' }}
                                                @if($address->is_default)
                                                <strong>(Mặc định)</strong>
                                                @endif
                                            </div>
                                            </label>

                                            <div class="address-actions" style="display: flex; gap: 5px;">
                                                <button type="button" class="btn btn-sm btn-outline-warning" data-bs-toggle="modal" data-bs-target="#editAddressModal{{ $address->id }}">
                                                    ✏️
                                                </button>
                                                @if(!$address->is_default)
                                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteAddress({{ $address->id }})">🗑️</button>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="modal fade" id="editAddressModal{{ $address->id }}" tabindex="-1" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    @include('frontend.components.proflie.address-form', [
                                                    'address' => $address,
                                                    'cities' => $cities,
                                                    'districts' => $districts,
                                                    'communes' => $communes
                                                    ])
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach

                                        <button type="button" class="btn btn-outline-primary mt-2" data-bs-toggle="modal" data-bs-target="#addAddressModal">
                                            ➕ Thêm địa chỉ mới
                                        </button>
                                    </div>
                                    --}}
                                    @error('address_id')
                                    <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="account-gr">
                                <div class="customer-left">
                                </div>
                                <div class="customer-right gender-gr">
                                    <button type="submit" class="btn-logout">
                                        {{__('common.Cập Nhật')}}</button>
                                </div>
                            </div>
                        </div>
                </div>
            </div>

        </div>
        </form>
        <div class="modal fade" id="addAddressModal" tabindex="-1" aria-labelledby="addAddressModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <form action="{{route('postAddressForUser')}}" class="addressForm" method="POST">
                    @csrf
                    <div class="modal-content ">
                        <div class="modal-header">
                            <h5 class="modal-title" id="addAddressModalLabel">Thêm địa chỉ mới</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Đóng"></button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>Địa chỉ chi tiết</label>
                                <input type="text" name="address_detail" class="form-control">
                            </div>
                            <div class="form-group mt-3">
                                <label>Tỉnh/Thành phố</label>
                                <select name="city_id" id="city" class="form-control">
                                    <option value="">-- Chọn Tỉnh/Thành --</option>
                                    @foreach($cities as $city)
                                    <option value="{{ $city->id }}">{{ $city->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group mt-3">
                                <label>Quận/Huyện</label>
                                <select name="district_id" id="district" class="form-control">
                                    <option value="">-- Chọn Quận/Huyện --</option>
                                    @foreach($districts as $item)
                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group mt-3">
                                <label>Phường/Xã</label>
                                <select name="commune_id" id="commune" class="form-control">
                                    <option value="">-- Chọn Phường/Xã --</option>
                                    @foreach($communes as $item)
                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-check mt-3">
                                <input class="form-check-input" type="checkbox" name="is_default" value="1" id="isDefaultCheck">
                                <label class="form-check-label" style="margin-left:10px" for="isDefaultCheck">
                                    Đặt làm địa chỉ mặc định
                                </label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Lưu địa chỉ</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Hủy</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>
@endsection
@section('js')



<script>
    function show_xn() {
        document.querySelector('.xac_nhan_mk').classList.toggle('active')
        document.querySelector('.change-pass-icon i').classList.toggle('active')
    }
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const avatarInput = document.getElementById('avatarInput');
        const avatarPreview = document.getElementById('avatarPreview');
        const avatarImg = avatarPreview.querySelector('.avatar-img');

        // Click vào ảnh → mở file dialog
        avatarPreview.addEventListener('click', function() {
            avatarInput.click();
        });

        // Preview ảnh sau khi chọn
        avatarInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    avatarImg.src = event.target.result;
                }
                reader.readAsDataURL(file);
            }
        });
    });


    $('#city').on('change', function() {
        let tinhTpId = $(this).val();
        let quanHuyenSelect = $('#district');

        quanHuyenSelect.empty().append('<option value="">Chọn Quận/Huyện</option>');

        if (tinhTpId) {
            $.ajax({
                url: "{{ route('getQuanHuyenOrder') }}",
                method: 'GET',
                data: {
                    city_id: tinhTpId
                },
                success: function(response) {
                    if (response.success) {
                        response.data.forEach(function(item) {
                            quanHuyenSelect.append(
                                `<option value="${item.id}">${item.name}</option>`
                            );
                        });
                    } else {
                        alert('Không có dữ liệu quận/huyện');
                    }
                },
                error: function() {
                    alert('Đã xảy ra lỗi khi lấy danh sách quận/huyện.');
                },
            });
        }
    });
    $('#district').on('change', function() {
        let xaHuyenId = $(this).val();
        let xaPhuongSelect = $('#commune');

        xaPhuongSelect.empty().append('<option value="">Chọn Xã/Phường</option>');

        if (xaHuyenId) {
            $.ajax({
                url: "{{ route('getXaHuyenOrder') }}",
                method: 'GET',
                data: {
                    district_id: xaHuyenId
                },
                success: function(response) {
                    if (response.success) {
                        response.data.forEach(function(item) {
                            xaPhuongSelect.append(
                                `<option value="${item.id}">${item.name}</option>`
                            );
                        });
                    } else {
                        alert('Không có dữ liệu xã/phường');
                    }
                },
                error: function() {
                    alert('Đã xảy ra lỗi khi lấy danh sách xã/phường.');
                },
            });
        }
    });
</script>
<script>
    function deleteAddress(addressId) {
        if (confirm('Bạn có chắc muốn xóa địa chỉ này không?')) {
            // Tạo form ẩn để submit DELETE request
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ url("destroy-address") }}/' + addressId;

            // Thêm CSRF token
            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = '{{ csrf_token() }}';
            form.appendChild(csrfToken);

            // Thêm method DELETE
            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'DELETE';
            form.appendChild(methodInput);

            document.body.appendChild(form);
            form.submit();
        }
    }
</script>

@endsection