@extends('frontend.layout.dashboard-master')
@section('site_title', __('Delete Account'))

@section('content')
<div class="max-w-[1120px] bg-white border border-[#d9e0e8] rounded-[12px] px-6 py-6">
    <div class="max-w-[720px]">

        <h1 class="text-[22px] leading-7 font-bold text-[#1f2937]">
            {{ __('Delete Account') }}
        </h1>
        <p class="mt-3 text-[14px] leading-[22px] font-medium text-[#64748b]">
            {{ __('Once you delete your account, there is no going back. Please be certain.') }}
        </p>

        {{-- Warning banner --}}
        <div class="mt-6 bg-[#FFF1F4] border border-[#ffc0cc] rounded-xl px-5 py-4 flex gap-3 items-start">
            <svg class="w-5 h-5 text-[#F0416C] mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
            </svg>
            <div>
                <p class="text-[14px] font-semibold text-[#1f2937]">{{ __('This action is permanent and cannot be undone.') }}</p>
                <ul class="mt-2 space-y-1 text-[13px] text-[#64748b]">
                    <li class="flex items-center gap-2">
                        <span class="w-1 h-1 rounded-full bg-[#64748b] flex-shrink-0"></span>
                        {{ __('You will be permanently logged out of your account.') }}
                    </li>
                    <li class="flex items-center gap-2">
                        <span class="w-1 h-1 rounded-full bg-[#64748b] flex-shrink-0"></span>
                        {{ __('All your profile data, orders, and proposals will be removed.') }}
                    </li>
                    <li class="flex items-center gap-2">
                        <span class="w-1 h-1 rounded-full bg-[#64748b] flex-shrink-0"></span>
                        {{ __('Your active subscriptions and wallet balance will be forfeited.') }}
                    </li>
                    <li class="flex items-center gap-2">
                        <span class="w-1 h-1 rounded-full bg-[#64748b] flex-shrink-0"></span>
                        {{ __('This account cannot be recovered after deletion.') }}
                    </li>
                </ul>
            </div>
        </div>

        <div class="mt-7">
            <button type="button" id="open_delete_modal"
                class="h-[44px] px-6 rounded-[7px] bg-[#F0416C] text-white text-[15px] font-semibold hover:bg-[#d9305b] transition">
                {{ __('Delete My Account') }}
            </button>
        </div>

    </div>
</div>

{{-- Confirmation Modal --}}
<div id="delete_confirm_modal"
    class="hidden fixed inset-0 z-50 items-center justify-center bg-black/50">
    <div class="bg-white rounded-[14px] shadow-xl w-full max-w-[440px] mx-4 px-6 py-7">

        <div class="flex flex-col items-center text-center">
            <div class="w-14 h-14 rounded-full bg-[#FFF1F4] flex items-center justify-center mb-4">
                <svg class="w-7 h-7 text-[#F0416C]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                </svg>
            </div>
            <h3 class="text-[18px] font-bold text-[#1f2937]">{{ __('Are you absolutely sure?') }}</h3>
            <p class="mt-2 text-[13px] text-[#64748b] leading-[20px]">
                {{ __('This will permanently delete your account and all associated data. This action cannot be reversed.') }}
            </p>
        </div>

        <form method="post" action="{{ route('freelancer.account.delete') }}" class="mt-6">
            @csrf
            <div class="flex items-center gap-3">
                <button type="button" id="close_delete_modal"
                    class="flex-1 h-[42px] rounded-[7px] border border-[#d6dde6] text-[#334155] text-[14px] font-semibold hover:bg-[#f1f5f9] transition">
                    {{ __('Cancel') }}
                </button>
                <button type="submit"
                    class="flex-1 h-[42px] rounded-[7px] bg-[#F0416C] text-white text-[14px] font-semibold hover:bg-[#d9305b] transition">
                    {{ __('Yes, Delete Account') }}
                </button>
            </div>
        </form>

    </div>
</div>
@endsection

@section('script')
<script>
(function ($) {
    "use strict";
    $(document).ready(function () {

        $('#open_delete_modal').on('click', function () {
            $('#delete_confirm_modal').removeClass('hidden').addClass('flex');
        });

        $('#close_delete_modal').on('click', function () {
            $('#delete_confirm_modal').removeClass('flex').addClass('hidden');
        });

        $('#delete_confirm_modal').on('click', function (e) {
            if ($(e.target).is('#delete_confirm_modal')) {
                $(this).removeClass('flex').addClass('hidden');
            }
        });

    });
}(jQuery));
</script>
@endsection