@extends('layouts.admin')

@section('title', 'Create Payment Method')

@section('content')
<div class="min-h-screen bg-slate-50">
    <div class="mx-auto max-w-3xl px-4 py-6 sm:px-6 lg:px-8">

        {{-- Header --}}
        <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-2xl font-bold text-slate-800 md:text-3xl">Create Payment Method</h1>
                <p class="mt-1 text-sm text-slate-500">
                    নতুন payment method যোগ করুন।
                </p>
            </div>

            <a href="{{ route('payment-methods.index') }}"
               class="inline-flex items-center rounded-2xl bg-slate-200 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-300">
                Back
            </a>
        </div>

        {{-- Toast --}}
        @if(session('success') || session('error'))
            <script>
                Swal.fire({
                    icon: '{{ session("success") ? "success" : "error" }}',
                    title: '{{ session("success") ? "Success!" : "Oops!" }}',
                    text: @json(session('success') ?? session('error')),
                    toast: true,
                    position: 'top-end',
                    timer: 2500,
                    showConfirmButton: false
                });
            </script>
        @endif

        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm md:p-8">
            @if ($errors->any())
                <div class="mb-6 rounded-2xl border border-rose-200 bg-rose-50 p-4">
                    <div class="mb-2 text-sm font-semibold text-rose-700">
                        Please fix the following errors:
                    </div>
                    <ul class="list-disc space-y-1 pl-5 text-sm text-rose-600">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('payment-methods.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                @csrf

                <div class="grid gap-6 md:grid-cols-2">
                    <div class="md:col-span-1">
                        <label for="name" class="mb-2 block text-sm font-semibold text-slate-700">
                            Method Name <span class="text-rose-500">*</span>
                        </label>
                        <input
                            type="text"
                            id="name"
                            name="name"
                            value="{{ old('name') }}"
                            placeholder="Example: bKash Personal"
                            class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
                        >
                    </div>

                    <div class="md:col-span-1">
                        <label for="number" class="mb-2 block text-sm font-semibold text-slate-700">
                            Number <span class="text-rose-500">*</span>
                        </label>
                        <input
                            type="text"
                            id="number"
                            name="number"
                            value="{{ old('number') }}"
                            placeholder="Example: 017XXXXXXXX"
                            class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
                        >
                    </div>
                </div>

                <div>
                    <label for="status" class="mb-2 block text-sm font-semibold text-slate-700">
                        Status <span class="text-rose-500">*</span>
                    </label>
                    <select
                        id="status"
                        name="status"
                        class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
                    >
                        <option value="active" {{ old('status', 'active') === 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>

                <div>
                    <label for="photo" class="mb-2 block text-sm font-semibold text-slate-700">
                        Method Logo
                    </label>

                    <div class="rounded-3xl border border-dashed border-slate-300 bg-slate-50 p-5">
                        <input
                            type="file"
                            id="photo"
                            name="photo"
                            accept="image/png,image/jpeg,image/jpg,image/webp"
                            class="w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-700 file:mr-4 file:rounded-xl file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-blue-700 hover:file:bg-blue-100"
                        >
                        <p class="mt-2 text-xs text-slate-400">jpg, jpeg, png, webp — max 2MB</p>

                        <div class="mt-4 hidden" id="photoPreviewWrapper">
                            <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Preview</div>
                            <img id="photoPreview"
                                 src=""
                                 alt="Preview"
                                 class="mt-3 h-20 w-20 rounded-2xl border border-slate-200 object-cover">
                        </div>
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-3 pt-2">
                    <button
                        type="submit"
                        class="inline-flex items-center rounded-2xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700"
                    >
                        Save Method
                    </button>

                    <a
                        href="{{ route('payment-methods.index') }}"
                        class="inline-flex items-center rounded-2xl bg-slate-200 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-300"
                    >
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const photoInput = document.getElementById('photo');
    const photoPreview = document.getElementById('photoPreview');
    const photoPreviewWrapper = document.getElementById('photoPreviewWrapper');

    if (photoInput) {
        photoInput.addEventListener('change', function () {
            const file = this.files[0];
            if (!file) {
                photoPreviewWrapper.classList.add('hidden');
                photoPreview.src = '';
                return;
            }

            const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
            const maxSize = 2 * 1024 * 1024;

            if (!allowedTypes.includes(file.type)) {
                this.value = '';

                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'error',
                    title: 'Only JPG, PNG, WEBP allowed',
                    showConfirmButton: false,
                    timer: 2200
                });
                return;
            }

            if (file.size > maxSize) {
                this.value = '';

                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'error',
                    title: 'Image must be under 2MB',
                    showConfirmButton: false,
                    timer: 2200
                });
                return;
            }

            const reader = new FileReader();
            reader.onload = function (e) {
                photoPreview.src = e.target.result;
                photoPreviewWrapper.classList.remove('hidden');
            };
            reader.readAsDataURL(file);
        });
    }
});
</script>
@endpush