@extends('layouts.app')

@section('title', 'DOA Claim')

@section('content')
<div class="container">
    <div class="row g-4">
        <div class="col-lg-5">
            <div class="card section-card">
                <div class="card-body p-4">
                    <h1>DOA claim form</h1>
                    <p class="text-muted">Use this form for dead on arrival livestock claims. Please complete it as soon as possible after delivery and before opening any affected bag if you need us to review the arrival condition fairly.</p>
                    <hr>
                    <h2 class="h5">Please include</h2>
                    <ul class="small text-muted mb-0">
                        <li>Your order number</li>
                        <li>Your contact details</li>
                        <li>Delivery date and time if known</li>
                        <li>How many livestock were affected</li>
                        <li>Clear photos or video of the sealed bag and affected livestock</li>
                    </ul>
                    <hr>
                    <p class="small text-muted mb-0">For full conditions, evidence expectations, and exclusions, please also read the <a href="{{ route('pages.show', 'doa-policy') }}">DOA Policy</a>.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="card section-card">
                <div class="card-body p-4">
                    <form method="post" action="{{ route('contact.doa.store') }}" enctype="multipart/form-data" class="row g-3">
                        @csrf
                        <input type="hidden" name="submission_type" value="doa">
                        <input type="hidden" name="subject" value="{{ old('subject', 'DOA Claim') }}">

                        <div class="col-md-6">
                            <label class="form-label" for="name">Name</label>
                            <input id="name" name="name" value="{{ old('name') }}" class="form-control" placeholder="Your name">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="email">Email</label>
                            <input id="email" name="email" value="{{ old('email') }}" class="form-control" placeholder="Email address">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="phone">Phone</label>
                            <input id="phone" name="phone" value="{{ old('phone') }}" class="form-control" placeholder="Telephone number">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="order_number">Order number</label>
                            <input id="order_number" name="order_number" value="{{ old('order_number') }}" class="form-control" placeholder="Order number">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="claim_type">Claim type</label>
                            @php($claimType = old('claim_type'))
                            <select id="claim_type" name="claim_type" class="form-select">
                                <option value="">Select claim type</option>
                                <option value="doa" @selected($claimType === 'doa')>Dead on arrival</option>
                                <option value="multiple_losses" @selected($claimType === 'multiple_losses')>Multiple losses on arrival</option>
                                <option value="damaged_livestock_bag" @selected($claimType === 'damaged_livestock_bag')>Damaged livestock bag</option>
                                <option value="delivery_delay_concern" @selected($claimType === 'delivery_delay_concern')>Delivery delay concern</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="affected_quantity">Affected quantity</label>
                            <input id="affected_quantity" type="number" min="1" name="affected_quantity" value="{{ old('affected_quantity') }}" class="form-control" placeholder="How many were affected?">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="delivery_service">Delivery service / courier</label>
                            <input id="delivery_service" name="delivery_service" value="{{ old('delivery_service') }}" class="form-control" placeholder="Courier or service used">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="delivered_at">Delivery date and time</label>
                            <input id="delivered_at" type="datetime-local" name="delivered_at" value="{{ old('delivered_at') }}" class="form-control">
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="message">What happened?</label>
                            <textarea id="message" name="message" rows="6" class="form-control" placeholder="Tell us what arrived, what condition it was in, whether the bag was still sealed, and anything else useful for review.">{{ old('message') }}</textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="attachments">Upload photos or video</label>
                            <input id="attachments" type="file" name="attachments[]" class="form-control" accept=".jpg,.jpeg,.png,.webp,.gif,.mp4,.mov,.webm,.avi,.m4v" multiple>
                            <div class="form-text">You can upload multiple images or video files. Max 8 files, up to 25MB each.</div>
                        </div>
                        <div class="col-12">
                            @include('partials.recaptcha')
                        </div>
                        <div class="col-12 d-flex gap-2">
                            <button class="btn btn-primary">Submit DOA claim</button>
                            <a href="{{ route('contact.index') }}" class="btn btn-outline-primary">General contact</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection