{{--@extends('layouts.customer')--}}
{{--@section('content')--}}
{{--    <div class="bg-white p-6 rounded-lg shadow-sm">--}}
{{--        <h2 class="text-xl font-bold mb-6">ثبت درخواست قرارداد جدید</h2>--}}

{{--        @if ($errors->any())--}}
{{--            <div class="bg-red-100 text-red-700 px-4 py-3 rounded mb-4">--}}
{{--                <ul>@foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach</ul>--}}
{{--            </div>--}}
{{--        @endif--}}

{{--        @if(session('error'))--}}
{{--            <div class="bg-orange-100 text-orange-700 px-4 py-3 rounded mb-4">{{ session('error') }}</div>--}}
{{--        @endif--}}

{{--        <form action="{{ route('customer.contracts.store') }}" method="POST">--}}
{{--            @csrf--}}
{{--            <div class="grid grid-cols-2 gap-4 mb-6">--}}
{{--                <div>--}}
{{--                    <label>تاریخ شروع</label>--}}
{{--                    <input type="text" name="start_date_jalali" data-jdp class="w-full border p-2 rounded" required>--}}
{{--                </div>--}}
{{--                <div>--}}
{{--                    <label>تاریخ پایان</label>--}}
{{--                    <input type="text" name="end_date_jalali" data-jdp class="w-full border p-2 rounded" required>--}}
{{--                </div>--}}
{{--            </div>--}}

{{--            <div id="signers-box">--}}
{{--                <h3 class="font-bold mb-2">مشخصات صاحبین امضا</h3>--}}
{{--                <div class="border p-4 rounded bg-gray-50 mb-4">--}}
{{--                    <p class="text-xs mb-2 text-blue-600">نفر اول (اجباری)</p>--}}
{{--                    <div class="grid grid-cols-4 gap-2">--}}
{{--                        <input type="text" name="signers[0][first_name]" placeholder="نام" class="border p-2 rounded text-sm" required>--}}
{{--                        <input type="text" name="signers[0][last_name]" placeholder="نام خانوادگی" class="border p-2 rounded text-sm" required>--}}
{{--                        <input type="text" name="signers[0][position]" placeholder="سمت" class="border p-2 rounded text-sm" required>--}}
{{--                        <input type="text" name="signers[0][national_id]" placeholder="کد ملی" class="border p-2 rounded text-sm" required>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}

{{--            <button type="button" id="add-signer" class="text-blue-500 text-sm mb-6">+ افزودن امضاکننده دوم</button>--}}

{{--            <div class="text-left">--}}
{{--                <button type="submit" class="bg-green-600 text-white px-6 py-2 rounded">ارسال درخواست</button>--}}
{{--            </div>--}}
{{--        </form>--}}
{{--    </div>--}}

{{--    <script>--}}
{{--        document.getElementById('add-signer').addEventListener('click', function() {--}}
{{--            const html = `--}}
{{--            <div class="border p-4 rounded bg-blue-50 mb-4 relative">--}}
{{--                <p class="text-xs mb-2 text-blue-600">نفر دوم</p>--}}
{{--                <div class="grid grid-cols-4 gap-2">--}}
{{--                    <input type="text" name="signers[1][first_name]" placeholder="نام" class="border p-2 rounded text-sm" required>--}}
{{--                    <input type="text" name="signers[1][last_name]" placeholder="نام خانوادگی" class="border p-2 rounded text-sm" required>--}}
{{--                    <input type="text" name="signers[1][position]" placeholder="سمت" class="border p-2 rounded text-sm" required>--}}
{{--                    <input type="text" name="signers[1][national_id]" placeholder="کد ملی" class="border p-2 rounded text-sm" required>--}}
{{--                </div>--}}
{{--                <button type="button" onclick="this.parentElement.remove(); document.getElementById('add-signer').style.display='block';" class="absolute top-2 left-2 text-red-500 text-xs">حذف</button>--}}
{{--            </div>`;--}}
{{--            document.getElementById('signers-box').insertAdjacentHTML('beforeend', html);--}}
{{--            this.style.display = 'none';--}}
{{--        });--}}
{{--    </script>--}}
{{--@endsection--}}

@extends('layouts.customer')
@section('page-title', 'ثبت درخواست قرارداد')

@section('content')
    <div class="max-w-4xl mx-auto">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="bg-blue-600 text-white p-6 text-center">
                <h2 class="text-xl font-bold">ثبت درخواست قرارداد جدید</h2>
            </div>

            <div class="p-6 md:p-8">
                @if ($errors->any())
                    <div class="bg-red-50 border border-red-200 text-red-700 px-5 py-3 rounded-lg mb-6 text-sm">
                        <ul class="space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>• {{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if(session('error'))
                    <div class="bg-orange-50 border border-orange-200 text-orange-700 px-5 py-3 rounded-lg mb-6 text-sm">
                        {{ session('error') }}
                    </div>
                @endif

                @if(session('success'))
                    <div class="bg-green-50 border border-green-200 text-green-700 px-5 py-3 rounded-lg mb-6 text-sm flex items-center">
                        <i class="fas fa-check-circle ml-3"></i>
                        {{ session('success') }}
                    </div>
                @endif

                <form action="{{ route('customer.contracts.store') }}" method="POST" class="space-y-7">
                    @csrf

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">تاریخ شروع قرارداد (شمسی)</label>
                            <input type="text" name="start_date_jalali" data-jdp required
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition text-sm"
                                   placeholder="1403/09/15">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">تاریخ پایان قرارداد (شمسی)</label>
                            <input type="text" name="end_date_jalali" data-jdp required
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition text-sm"
                                   placeholder="1404/03/15">
                        </div>
                    </div>

                    <div>
                        <h3 class="text-lg font-bold text-gray-800 mb-5">مشخصات صاحبین امضا</h3>

                        <div id="signers-box" class="space-y-5">
                            <div class="bg-blue-50 border border-blue-200 rounded-lg p-5">
                                <p class="text-sm font-medium text-blue-700 mb-3">نفر اول (اجباری)</p>
                                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                                    <input type="text" name="signers[0][first_name]" placeholder="نام" required
                                           class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 transition text-sm">
                                    <input type="text" name="signers[0][last_name]" placeholder="نام خانوادگی" required
                                           class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 transition text-sm">
                                    <input type="text" name="signers[0][position]" placeholder="سمت" required
                                           class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 transition text-sm">
                                    <input type="text" name="signers[0][national_id]" placeholder="کد ملی" maxlength="10" required
                                           class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 transition text-sm text-left" dir="ltr">
                                </div>
                            </div>
                        </div>

                        <button type="button" id="add-signer"
                                class="mt-3 text-blue-600 hover:text-blue-800 font-medium text-sm flex items-center transition">
                            <i class="fas fa-plus ml-2"></i>
                            افزودن امضاکننده دوم (اختیاری)
                        </button>
                    </div>

                    <div class="text-center pt-6">
                        <button type="submit"
                                class="bg-green-600 hover:bg-green-700 text-white font-bold px-10 py-3 rounded-full shadow-md hover:shadow-lg transition text-sm">
                            ارسال درخواست برای تأیید ادمین
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        let signerCount = 1;

        document.getElementById('add-signer').addEventListener('click', function() {
            if (signerCount >= 2) return;

            const html = `
        <div class="bg-indigo-50 border border-indigo-200 rounded-lg p-5 relative">
            <p class="text-sm font-medium text-indigo-700 mb-3">نفر دوم (اختیاری)</p>
            <button type="button" onclick="this.parentElement.remove(); document.getElementById('add-signer').style.display='flex';"
                    class="absolute top-3 left-3 text-red-500 hover:text-red-700 transition">
                <i class="fas fa-times text-lg"></i>
            </button>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <input type="text" name="signers[1][first_name]" placeholder="نام"
                       class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 transition text-sm">
                <input type="text" name="signers[1][last_name]" placeholder="نام خانوادگی"
                       class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 transition text-sm">
                <input type="text" name="signers[1][position]" placeholder="سمت"
                       class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 transition text-sm">
                <input type="text" name="signers[1][national_id]" placeholder="کد ملی" maxlength="10"
                       class="px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 transition text-sm text-left" dir="ltr">
            </div>
        </div>`;

            document.getElementById('signers-box').insertAdjacentHTML('beforeend', html);
            this.style.display = 'none';
            signerCount++;
        });
    </script>
@endsection