@extends('merchant.templates.layout')

@section('head')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    .select2-container { width: 100% !important; }
    .select2-selection { min-height: 38px !important; padding: 5px 8px !important; }

    .profile-meta {
        font-size: 12.5px;
        color: #64748b;
    }
    .profile-meta .meta-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #94a3b8;
    }
    .profile-meta .meta-value {
        font-size: 13.5px;
        font-weight: 600;
        color: #1e293b;
    }
    .verified-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
    }
    .verified-pill.yes { background: #d8f3e6; color: #047857; }
    .verified-pill.no  { background: #e6eaf0; color: #475569; }
</style>
@endsection

@section('content')
<h4 class="fw-bold mb-3">My Profile</h4>

<div class="row g-3">

    {{-- ============================================================
         LEFT: Forms
         ============================================================ --}}
    <div class="col-lg-8">

        {{-- Profile Information --}}
        <div class="card mb-3">
            <div class="card-header py-3 border-bottom">
                <h5 class="mb-0" style="font-size:15px;font-weight:700;">Profile Information</h5>
            </div>
            <form id="profileForm" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">First Name</label>
                            <input type="text" name="first_name" class="form-control"
                                   value="{{ old('first_name', $user->first_name) }}" maxlength="120">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Last Name</label>
                            <input type="text" name="last_name" class="form-control"
                                   value="{{ old('last_name', $user->last_name) }}" maxlength="120">
                        </div>

                        <div class="col-md-12">
                            <label class="form-label">Company Name</label>
                            <input type="text" name="company_name" class="form-control"
                                   value="{{ old('company_name', $user->company_name) }}" maxlength="120">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Country</label>
                            <select name="country_id" id="countrySelect" class="form-select">
                                <option value="">— Select Country —</option>
                                @foreach($countries as $c)
                                    <option value="{{ $c->id }}" {{ (int) $user->country_id === (int) $c->id ? 'selected' : '' }}>
                                        {{ $c->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">City</label>
                            <select name="city_id" id="citySelect" class="form-select">
                                <option value="">— Select City —</option>
                                @foreach($cities as $c)
                                    <option value="{{ $c->id }}"
                                            data-country="{{ $c->country_id }}"
                                            {{ (int) $user->city_id === (int) $c->id ? 'selected' : '' }}>
                                        {{ $c->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Email</label>
                            <input type="text" class="form-control" value="{{ $user->email }}" disabled>
                            <div class="form-text">Change via OTP verification in the app.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="text" class="form-control"
                                   value="{{ ($user->dial_code || $user->phone) ? '+' . $user->dial_code . $user->phone : '' }}"
                                   disabled>
                            <div class="form-text">Change via OTP verification in the app.</div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <button type="submit" class="btn btn-primary">
                        <span class="btn-text">Save Changes</span>
                        <span class="spinner-border spinner-border-sm d-none ms-2"></span>
                    </button>
                </div>
            </form>
        </div>

        {{-- Change Password --}}
        <div class="card">
            <div class="card-header py-3 border-bottom">
                <h5 class="mb-0" style="font-size:15px;font-weight:700;">Change Password</h5>
            </div>
            <form id="passwordForm">
                @csrf
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Current Password</label>
                            <input type="password" name="old_password" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">New Password</label>
                            <input type="password" name="new_password" class="form-control" required minlength="8">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Confirm Password</label>
                            <input type="password" name="confirm_password" class="form-control" required>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-end">
                    <button type="submit" class="btn btn-primary">
                        <span class="btn-text">Update Password</span>
                        <span class="spinner-border spinner-border-sm d-none ms-2"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- ============================================================
         RIGHT: Logo + Account meta (mirrors API UserResource)
         ============================================================ --}}
    <div class="col-lg-4">

        {{-- Logo --}}
        <div class="card mb-3">
            <div class="card-header py-3 border-bottom">
                <h5 class="mb-0" style="font-size:15px;font-weight:700;">Company Logo</h5>
            </div>
            <div class="card-body text-center">
                @if($user->profileImage)
                    <img src="{{ $user->profileImage->url }}" class="rounded mb-3"
                         style="width:140px;height:140px;object-fit:cover;">
                @else
                    <div style="width:140px;height:140px;border-radius:12px;background:#f1f5f9;display:inline-flex;align-items:center;justify-content:center;color:#94a3b8;margin-bottom:12px;">
                        <i class="ri-image-line fs-40"></i>
                    </div>
                @endif

                <form id="logoForm" enctype="multipart/form-data">
                    @csrf
                    <input type="file" name="logo" id="logoInput" class="form-control mb-2" accept="image/*">
                    <button type="submit" class="btn btn-primary btn-sm w-100">
                        <span class="btn-text">Upload</span>
                        <span class="spinner-border spinner-border-sm d-none ms-2"></span>
                    </button>
                </form>

                @if($user->profileImage)
                    <form id="removeLogoForm" class="mt-2">
                        @csrf
                        <button type="submit" class="btn btn-outline-danger btn-sm w-100">
                            <i class="ri-delete-bin-line"></i> Remove Logo
                        </button>
                    </form>
                @endif
            </div>
        </div>

        {{-- Account Meta (fields from API UserResource that aren't editable here) --}}
        <div class="card">
            <div class="card-header py-3 border-bottom">
                <h5 class="mb-0" style="font-size:15px;font-weight:700;">Account</h5>
            </div>
            <div class="card-body profile-meta">
                <div class="mb-3">
                    <div class="meta-label">User Code</div>
                    <div class="meta-value">{{ $user->user_code ?: '—' }}</div>
                </div>
                <div class="mb-3">
                    <div class="meta-label">Role</div>
                    <div class="meta-value">
                        {{ config('global.user_roles')[ROLE_MERCHANT] ?? 'Merchant' }}
                    </div>
                </div>
                <div class="mb-3">
                    <div class="meta-label">Phone Verified</div>
                    <div>
                        @if($user->phone_verified)
                            <span class="verified-pill yes"><i class="ri-check-line"></i> Verified</span>
                        @else
                            <span class="verified-pill no"><i class="ri-close-line"></i> Not verified</span>
                        @endif
                    </div>
                </div>
                <div class="mb-3">
                    <div class="meta-label">Status</div>
                    <div>{!! account_status_badge($user->status) !!}</div>
                </div>
                <div class="mb-0">
                    <div class="meta-label">Registered</div>
                    <div class="meta-value">
                        {{ web_date_in_timezone($user->created_at, 'M d, Y') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
var CSRF = '{{ csrf_token() }}';

$(function () {

    /* ============================================================
       COUNTRY → CITY DEPENDENT DROPDOWNS
       ============================================================ */
    var allCities = $('#citySelect option').map(function () {
        return {
            id: $(this).val(),
            name: $(this).text(),
            country: $(this).data('country')
        };
    }).get().filter(function (o) { return o.id; });

    function refreshCities() {
        var countryId = $('#countrySelect').val();
        var $city     = $('#citySelect');
        var current   = $city.val();

        $city.empty().append('<option value="">— Select City —</option>');

        var list = countryId
            ? allCities.filter(function (c) { return String(c.country) === String(countryId); })
            : allCities;

        list.forEach(function (c) {
            var selected = String(c.id) === String(current) ? ' selected' : '';
            $city.append('<option value="' + c.id + '"' + selected + '>' + c.name + '</option>');
        });

        $city.trigger('change.select2');
    }

    $('#countrySelect').select2({ placeholder: '— Select Country —' });
    $('#citySelect').select2({ placeholder: '— Select City —' });

    $('#countrySelect').on('change', refreshCities);
    refreshCities();  // initial state — filters based on saved country

    /* ============================================================
       PROFILE INFO
       ============================================================ */
    $('#profileForm').on('submit', function (e) {
        e.preventDefault();
        var $btn = $(this).find('button[type=submit]');
        $btn.prop('disabled', true).find('.btn-text').text('Saving...');
        $btn.find('.spinner-border').removeClass('d-none');

        $.ajax({
            url: '{{ route("merchant.profile.update") }}',
            type: 'POST',
            data: $(this).serialize(),
            success: function (res) {
                toastr.success(res.message || 'Saved');
                setTimeout(function () { location.reload(); }, 500);
            },
            error: function (xhr) { toastr.error(xhr.responseJSON?.message || 'Failed'); }
        }).always(function () {
            $btn.prop('disabled', false).find('.btn-text').text('Save Changes');
            $btn.find('.spinner-border').addClass('d-none');
        });
    });

    /* ============================================================
       CHANGE PASSWORD
       ============================================================ */
    $('#passwordForm').on('submit', function (e) {
        e.preventDefault();
        var $btn = $(this).find('button[type=submit]');
        $btn.prop('disabled', true).find('.btn-text').text('Updating...');
        $btn.find('.spinner-border').removeClass('d-none');

        $.ajax({
            url: '{{ route("merchant.profile.password") }}',
            type: 'POST',
            data: $(this).serialize(),
            success: function (res) {
                toastr.success(res.message || 'Updated');
                $('#passwordForm')[0].reset();
            },
            error: function (xhr) { toastr.error(xhr.responseJSON?.message || 'Failed'); }
        }).always(function () {
            $btn.prop('disabled', false).find('.btn-text').text('Update Password');
            $btn.find('.spinner-border').addClass('d-none');
        });
    });

    /* ============================================================
       LOGO UPLOAD
       ============================================================ */
    $('#logoForm').on('submit', function (e) {
        e.preventDefault();
        var fd   = new FormData(this);
        var $btn = $(this).find('button[type=submit]');
        $btn.prop('disabled', true).find('.btn-text').text('Uploading...');
        $btn.find('.spinner-border').removeClass('d-none');

        $.ajax({
            url: '{{ route("merchant.profile.update") }}',
            type: 'POST',
            data: fd,
            processData: false,
            contentType: false,
            success: function (res) {
                toastr.success(res.message || 'Uploaded');
                setTimeout(function () { location.reload(); }, 500);
            },
            error: function (xhr) { toastr.error(xhr.responseJSON?.message || 'Failed'); }
        }).always(function () {
            $btn.prop('disabled', false).find('.btn-text').text('Upload');
            $btn.find('.spinner-border').addClass('d-none');
        });
    });

    /* ============================================================
       LOGO REMOVE
       ============================================================ */
    $('#removeLogoForm').on('submit', function (e) {
        e.preventDefault();
        Swal.fire({
            title: 'Remove logo?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, remove',
            confirmButtonColor: '#d33'
        }).then(function (r) {
            if (!r.isConfirmed) return;
            $.ajax({
                url: '{{ route("merchant.profile.update") }}',
                type: 'POST',
                data: { _token: CSRF, remove_logo: 1 },
                success: function (res) {
                    toastr.success(res.message);
                    setTimeout(function () { location.reload(); }, 500);
                },
                error: function (xhr) { toastr.error(xhr.responseJSON?.message || 'Failed'); }
            });
        });
    });
});
</script>
@endsection