@extends('agent.layouts.app')

@section('content')
<div class="min-h-screen bg-gray-100 p-4 md:p-8">
    <div class="mx-auto">

        <!-- Header -->
        <div class="bg-teal-600 text-white p-6 rounded-t-lg">
            <h1 class="text-2xl md:text-3xl font-bold">Update Your Information</h1>
            @if(empty($user->tsm_id))<h3 class="bg-teal-600 bg-white mt-2 px-2 rounded text-lg text-red-600 text-white w-max">Please enter your TSM ID to send payment links</h3>@endif

        </div>

        <!-- Form Card -->
        <div class="bg-white p-6 rounded-b-lg shadow-md">

            <form action="{{ route('agent.settings.update') }}" method="POST" class="space-y-6">
                @csrf
                
                @include('agent.layouts.message')
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Full Name -->
                    <div class="space-y-2">
                        <label class="block text-gray-700 font-medium">Full Name</label>
                        <input type="text" name="full_name" class="border rounded px-3 py-2 w-full" required value="{{ old('full_name', $user->full_name) }}">
                    </div>

                    <!-- Email -->
                    <div class="space-y-2">
                        <label class="block text-gray-700 font-medium">Email</label>
                        <input type="email" name="email"
                            class="border rounded px-3 py-2 w-full bg-gray-100 cursor-not-allowed"
                            value="{{ old('email', $user->email) }}" disabled>
                    </div>

                    <!-- Mobile Number -->
                    <div class="space-y-2">
                        <label class="block text-gray-700 font-medium">Mobile Number</label>
                        <input type="text" name="mobile_number" class="border rounded px-3 py-2 w-full" required value="{{ old('mobile_number', $user->mobile_number) }}" >
                    </div>

                    <!-- CNIC -->
                    <div class="space-y-2">
                        <label class="block text-gray-700 font-medium">CNIC</label>
                        <input type="text" name="cnic" class="border rounded px-3 py-2 w-full" required value="{{ old('cnic', $user->cnic) }}">
                    </div>

                    <!-- Date of Birth -->
                    <div class="space-y-2">
                        <label class="block text-gray-700 font-medium">Date of Birth</label>
                        <input type="date" name="dob" class="border rounded px-3 py-2 w-full" required value="{{ old('dob', $user->dob) }}">
                    </div>

                    <!-- Call Center -->
                    <div class="space-y-2">
                        <label class="block text-gray-700 font-medium">Call Center</label>
                        <input type="text" name="call_center" class="border rounded px-3 py-2 w-full" value="{{ old('call_center', $user->call_center) }}">
                    </div>

                    <!-- TSM ID -->
                    <div class="space-y-2 md:col-span-2">
                        <label class="block text-gray-700 font-medium">TSM ID</label>
                        <input type="text" name="tsm_id" class="border rounded px-3 py-2 w-full" value="{{ old('tsm_id', $user->tsm_id) }}">
                    </div>

                    <!-- Password -->
                    <div class="space-y-2 md:col-span-2">
                        <label class="block text-gray-700 font-medium">Password</label>
                        <input type="password" name="password" class="border rounded px-3 py-2 w-full" placeholder="Leave blank to keep current password">
                        <p class="text-sm text-gray-500 mt-1">
                            If you don't want to change your password, leave it blank. If you update your password, you will be logged out.
                        </p>
                    </div>

                    <!-- Confirm Password -->
                    <div class="space-y-2 md:col-span-2">
                        <label class="block text-gray-700 font-medium">Confirm Password</label>
                        <input type="password" name="password_confirmation" class="border rounded px-3 py-2 w-full" placeholder="Confirm new password">
                    </div>

                </div>

                <!-- Save Button -->
                <div class="pt-4">
                    <button type="submit" class="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700">
                        Save
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>
@endsection