@if (Session::has('message'))
    <div id="alert-border-3" class="alert-box">
        <svg class="icon" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                clip-rule="evenodd"></path>
        </svg>
        <div class="message">{{ Session::get('message') }}</div>
        <button type="button" class="close-button" data-dismiss-target="#alert-border-3" aria-label="Close">
            <span class="sr-only">Dismiss</span>
            <svg aria-hidden="true" class="close-icon" fill="currentColor" viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                    clip-rule="evenodd"></path>
            </svg>
        </button>
    </div>
@endif
<div class="max:w-xl flex-col space-y-6">
    <h2 class="text-3xl text-[#005aab] mx-24 font-semibold">How can I help you?</h2>
    @if (session()->has('success'))
        <div class="success-message">
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if (session()->has('error'))
        <div class="error-message">
            <span>{{ session('error') }}</span>
        </div>
    @endif

    <form action="{{ route('feedback.store') }}" method="POST" id="contactForm" name="contactForm">
        <div class=" max:w-xl grid gap-5 grid-cols-1 md:grid-cols-2 lg:pt-16 mx-24">
            @csrf
            <div class="w-full flex flex-col space-y-3">
                <label for="full_name">Full Name <span class="text-[#ff0000] ">*</span></label>
                <input type="text" id="full_name" name="full_name"
                    class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9] @error('full_name') error-field @enderror"
                    placeholder="Full Name" required value="{{ old('full_name') }}">
                @error('full_name')
                    <div class="text-[#ff0000] small">{{ $message }}</div>
                @enderror
            </div>

            <div class="w-full flex flex-col space-y-3">
                <label for="email">Email Address<span class="text-[#ff0000] ">*</span></label>
                <input type="email" id="email" name="email"
                    class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9]  @error('email') error-field @enderror"
                    placeholder="Email Address" required
                    value="{{ old('email', isset($feedback) ? $feedback->email : null) }}">
                @error('email')
                    <div class="text-[#ff0000]  small">{{ $message }}</div>
                @enderror
            </div>

            <div class="w-full flex flex-col space-y-3">
                <label for="contact">Contact Number<span class="text-[#ff0000] ">*</span></label>
                <input type="text" id="contact" name="contact"
                    class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9]  @error('contact') error-field @enderror"
                    placeholder="Contact Number" required
                    value="{{ old('contact', isset($feedback) ? $feedback->contact : null) }}">
                @error('contact')
                    <div class="text-[#ff0000]  small">{{ $message }}</div>
                @enderror
            </div>

            <div class="w-full flex flex-col space-y-3">
                <label for="branch_id">Preferred Branch <span class="text-[#ff0000]">*</span></label>
                <select
                    class="w-full border-2 rounded-md border-[#6c757d] py-3 px-5 form-control @error('branch_id') error-field @enderror select"
                    name="branch_id" id="branch_id">
                    <option value="" disabled>Select Preferred Branch</option>
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}"
                            {{ old('branch_id', isset($feedback) ? $feedback->branch_id : null) == $branch->id ? 'selected' : '' }}>
                            {{ $branch->name }}
                        </option>
                    @endforeach
                </select>
                @error('branch_id')
                    <div class="text-[#ff0000]  small">{{ $message }}</div>
                @enderror
            </div>

            <div class="w-full flex flex-col space-y-3">
                <label for="product_id">Service Name <span class="text-[#ff0000]">*</span></label>
                <select
                    class="w-full border-2 rounded-md border-[#6c757d] py-3 px-5 form-control @error('product_id') error-field @enderror select"
                    name="product_id" id="product_id">
                    <option value="" disabled>Select Preferred Service</option>
                    @foreach ($products as $product)
                        <option value="{{ $product->id }}"
                            {{ old('product_id', isset($feedback) ? $feedback->product_id : null) == $product->id ? 'selected' : '' }}>
                            {{ $product->name }}
                        </option>
                    @endforeach
                </select>
                @error('product_id')
                    <div class="text-[#ff0000]  small">{{ $message }}</div>
                @enderror
            </div>

            <div class="w-full flex flex-col space-y-3">
                <label for="account_number">Account Number</label>
                <input type="text" id="account_number" name="account_number"
                    class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9]  @error('account_number') error-field @enderror"
                    placeholder="Account Number"
                    value="{{ old('account_number', isset($feedback) ? $feedback->account_number : null) }}">
                @error('account_number')
                    <div class="text-[#ff0000]  small">{{ $message }}</div>
                @enderror
            </div>

            <div class="w-full flex flex-col space-y-3">
                <label for="feedback">Feedback <span class="text-[#ff0000]">*</span></label>
                <textarea name="feedback" id="feedback" cols="30" rows="2"
                    class="py-3 px-5 border-2 rounded-md border-[#d9d9d9] placeholder:text-[#d9d9d9] @error('feedback') error-field @enderror"
                    placeholder="Your feedback">{{ old('feedback', isset($feedback) ? $feedback->feedback : '') }}</textarea>
                @error('feedback')
                    <div class="text-[#ff0000] small">{{ $message }}</div>
                @enderror
            </div>

            <div>
                {!! NoCaptcha::renderJs() !!}
                {!! NoCaptcha::display() !!}
                @error('g-recaptcha-response')
                    <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="flex justify-start mx-24 mt-12">
            <button type="submit"
                class="py-4 px-12 bg-[#005aab] rounded-xl text-white font-bold hover:bg-gradient-to-r hover:from-[#004d6e] hover:to-[#00accc]
            transition ease-in-out duration-200 hover:cursor-pointer">
                Submit
            </button>
        </div>
    </form>
</div>