@extends('back.layout')

@section('content')
    <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="flex items-center space-x-4 py-5 lg:py-6">
            <h2 class="text-xl font-medium text-slate-700 dark:text-navy-100">
                Edit Order
            </h2>
        </div>
        <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
            <div class="col-span-12">
                <div class="card">
                    <div class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5">
                        <div class="flex items-center justify-between space-x-2">
                            <div class="flex items-center">
                                <div class="flex h-7 w-7 items-center justify-center rounded-lg bg-primary/10 p-1 text-primary dark:bg-accent-light/10 dark:text-accent-light">
                                    <i class="fa-solid fa-edit"></i>
                                </div>
                                <h4 class="text-lg font-medium text-slate-700 dark:text-navy-100" style="margin-left: 7px;">
                                    Edit Order
                                </h4>
                            </div>
                            <a href="{{ route('commandes.index') }}"
                               class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                <span>Back</span>
                            </a>
                        </div>
                    </div>
                    <form action="{{ route('commandes.update', $commande->id) }}" method="POST" class="space-y-4 p-4 sm:p-5">
                        @csrf
                        @method('PUT')
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <label class="block">
                                <span>User <span style="color:red">*</span></span>
                                <select name="user_id" id="user_id"
                                        class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                        required>
                                    <option value="" disabled>Select a User</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ old('user_id', $commande->user_id) == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                                    @endforeach
                                </select>
                                @error('user_id')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                            <label class="block">
                                <span>Service <span style="color:red">*</span></span>
                                <select name="service_id" id="service_id"
                                        class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                        required>
                                    <option value="" disabled>Select a Service</option>
                                    @foreach($services as $service)
                                        <option value="{{ $service->id }}" {{ old('service_id', $commande->service_id) == $service->id ? 'selected' : '' }}>{{ $service->{'nom_' . app()->getLocale()} }}</option>
                                    @endforeach
                                </select>
                                @error('service_id')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                        </div>
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <label class="block">
                                <span>Order Date <span style="color:red">*</span></span>
                                <input type="date" name="date_commande" id="date_commande"
                                       class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                       value="{{ old('date_commande', $commande->date_commande) }}" required>
                                @error('date_commande')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                            <label class="block">
                                <span>Total Amount <span style="color:red">*</span></span>
                                <input type="number" step="0.01" name="montant_total" id="montant_total"
                                       class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                       placeholder="Enter total amount" value="{{ old('montant_total', $commande->montant_total) }}" required>
                                @error('montant_total')
                                    <span style="color:red">{{ $message }}</span>
                                @enderror
                            </label>
                        </div>
                        <div class="flex justify-center space-x-2 pt-4">
                            <button type="reset"
                                    class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                <span>Cancel</span>
                            </button>
                            <button type="submit"
                                    class="btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                <span>Update</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>
@endsection