@extends('layouts.master')

@section('title', 'Add Order')

@section('content')
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">

        @if(Session::has('error'))
            <div class="alert alert-danger">
                {{ Session::get('error') }}
            </div>
        @endif
        @if(Session::has('success'))
            <div class="alert alert-success">
                {{ Session::get('success') }}
            </div>
        @endif

        <form method="post" action="{{ route('admin.order.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <x-input-error :messages="$errors->get('status')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('waste')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('bins')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('delivery')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('collection')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('name')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('email')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('phone')" class="mt-2 alert-danger" />
                    <x-input-error :messages="$errors->get('address')" class="mt-2 alert-danger" />
                    <div class="card-header">
                        <label>Order Details</label>
                    </div>
                    <div class="card-body">

                        <div class="form-group">
                            <label for="OrderStatus">Order Status</label>
                            <select id="OrderStatus" class="form-control block mt-1 w-full" name="status">
                                <option value="">Select Status</option>
                                @if($status)
                                    @foreach($status as $status)
                                    <option value="{{ $status }}" {{ old('status') == $status ? 'selected' : '' }}>
                                        {{ $status }}
                                    </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="OrderPostcode">Delivery Zone</label>
                            <select id="OrderPostcode" class="form-control block mt-1 w-full" type="text" name="postcode">
                                <option>Select Delivery Zone</option>
                                @if($locations)
                                    @foreach($locations as $location)
                                    <option value="{{ $location->zip }}" {{ old('postcode') == $location->zip ? 'selected' : '' }}>
                                        {{ $location->zip.' - ' .$location->location }}
                                    </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="OrderWaste">Waste Type</label>
                            <select id="OrderWaste" class="form-control block mt-1 w-full" name="waste">
                                <option value="">Select Waste Type</option>
                                @if($wastes)
                                    @foreach($wastes as $waste)
                                    <option value="{{ $waste->id }}" {{ old('waste') == $waste->id ? 'selected' : '' }}>
                                        {{ $waste->name }}
                                    </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="OrderBin">Bin Size</label>
                            <select id="OrderBin" class="form-control block mt-1 w-full" name="bins">
                                <option value="">Select Bin Size</option>
                                @if($containers)
                                    @foreach($containers as $container)
                                    <option value="{{ $container->id }}" {{ old('bins') == $container->id ? 'selected' : '' }}>
                                        {{ $container->name }}
                                    </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="OrderdDelivery">Delivery Date</label>
                            <x-text-input id="OrderdDelivery" class="form-control block mt-1 w-full" type="date" name="delivery" :value="old('delivery')" autocomplete="delivery" placeholder="Enter Delivery Date" />
                        </div>

                        <div class="form-group">
                            <label for="OrderdCollection">Collection Date</label>
                            <x-text-input id="OrderdCollection" class="form-control block mt-1 w-full" type="date" name="collection" :value="old('collection')" autocomplete="collection" placeholder="Enter Collection Date" />
                        </div>

                        <div class="form-group">
                            <label for="OrderdPrice">Price</label>
                            <div class="input-group block">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        $
                                    </span>
                                </div>
                                <x-text-input id="OrderdPrice" class="form-control block mt-1 w-full" type="text" name="price" :value="old('price')" autocomplete="price" placeholder="Enter Price" />
                                Note: It will calculate automatically but you can enter manually if you want then use price as you entered.
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="OrderdPayment">Payment Method</label>
                            <div class="form-check">
                                <input id="paymentDelivery" class="form-check-input" type="radio" name="payment" value="delivery" checked />
                                <label class="form-check-label" for="paymentDelivery">Pay on Delivery</label>
                            </div>
                            <div class="form-check">
                                <input id="paymentBank" class="form-check-input" type="radio" name="payment" value="bank" />
                                <label class="form-check-label" for="paymentBank">Pay by Bank</label>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">Add Order</button>
                    </div>
                </div>
                <!-- /.card -->
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <label>Customer Details</label>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="CustomerName">Name</label>
                            <x-text-input id="CustomerName" class="form-control block mt-1 w-full" type="text" name="name" :value="old('name')" autocomplete="name" placeholder="Enter Name" />
                        </div>

                        <div class="form-group">
                            <label for="CustomerEmail">Email</label>
                            <x-text-input id="CustomerEmail" class="form-control block mt-1 w-full" type="email" name="email" :value="old('email')" autocomplete="email" placeholder="Enter Email" />
                        </div>

                        <div class="form-group">
                            <label for="CustomerPhone">Phone</label>
                            <x-text-input id="CustomerPhone" class="form-control block mt-1 w-full" type="text" name="phone" :value="old('phone')" autocomplete="phone" placeholder="Enter Phone" />
                        </div>

                        <div class="form-group">
                            <label for="CustomerAddress">Address</label>
                            <x-text-input id="CustomerAddress" class="form-control block mt-1 w-full" type="text" name="address" :value="old('address')" autocomplete="address" placeholder="Enter Address" />
                        </div>

                        <div class="form-group">
                            <label for="CustomerSuburb">Suburb</label>
                            <x-text-input id="CustomerSuburb" class="form-control block mt-1 w-full" type="text" name="suburb" :value="old('suburb')" autocomplete="suburb" placeholder="Enter Suburb" />
                        </div>

                        <div class="form-group">
                            <label for="CustomerInstructions">Instructions</label>
                            <textarea id="CustomerInstructions" class="form-control block mt-1 w-full" name="instructions" :value="old('instructions')" autocomplete="instructions" placeholder="Enter Instructions"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        </form>
      </div>
    </section>
    <!-- /.content -->
@endsection
@section('pageJS')
<script>
    $(function () {
        $("input[data-bootstrap-switch]").each(function(){
        $(this).bootstrapSwitch('state', $(this).prop('checked'));
        })
    });
</script>
@endsection