@extends('layout.master', ['headerTitle' => 'Add Order'])

@section('style')
    <link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .error {
            color: red;
        }

        .form-control.error {
            border-color: red;
        }
    </style>
@endsection

@section('body')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="container-xxl" id="kt_content_container">
            <div>
                <div class="card card-flush h-lg-100" id="kt_contacts_main">
                    <div class="card-header pt-7" id="kt_chat_contacts_header">
                        <div class="card-title">
                            <i class="fas fa-ad me-2" style="font-size: 22px;"></i>
                            <h2>Add Order</h2>
                        </div>
                        <div class="d-flex align-items-center py-3 py-md-1">
                            <a href="{{ url()->previous() }}" class="btn btn btn-dark">Back</a>
                        </div>
                    </div>
                    <div class="card-body pt-5">
                        <form id="transaction_add_form" class="form" action="{{ route('order.store') }}" method="post"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">Title</span>
                                        </label>
                                        <input type="text" id="title" class="form-control form-control-solid"
                                            name="title" placeholder="Title" value="{{ old('title') }}" required />
                                        <span style="color:red">
                                            @error('title')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">Warehouse</span>
                                        </label>
                                        <select id="warehouse" name="warehouse" aria-label="Select a warehouse"
                                            data-control="select2" data-placeholder="Select a warehouse..."
                                            data-allow-clear="true"
                                            class="form-select form-select-solid form-select-lg fw-bold">
                                            <option></option>
                                            @foreach ($allWarehouses as $warehouse)
                                                <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                                            @endforeach
                                        </select>
                                        <span style="color:red">
                                            @error('warehouse')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                            </div>

                            @if (Auth::user()->role_id == 1)
                                <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                                    <div class="col">
                                        <div class="fv-row mb-7">
                                            <label class="fs-6 fw-bold form-label mt-3">
                                                <span class="required">Description</span>
                                            </label>
                                            <textarea type="text" id="desc" class="form-control form-control-solid" name="desc" placeholder="Description"
                                                value="{{ old('desc') }}" required cols="30" rows="3"></textarea>
                                            <span style="color:red">
                                                @error('desc')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="fv-row mb-7">
                                            <label class="fs-6 fw-bold form-label mt-3">
                                                <span class="required">Company</span>
                                            </label>
                                            <select id="company" name="company" aria-label="Select a company"
                                                data-control="select2" data-placeholder="Select a company..."
                                                data-allow-clear="true"
                                                class="form-select form-select-solid form-select-lg fw-bold">
                                                <option></option>
                                                @foreach ($allcompanies as $company)
                                                    <option value="{{ $company->id }}">{{ $company->name }}</option>
                                                @endforeach
                                            </select>
                                            <span style="color:red">
                                                @error('company')
                                                    {{ $message }}
                                                @enderror
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">Description</span>
                                        </label>
                                        <textarea type="text" id="desc" class="form-control form-control-solid" name="desc" placeholder="Description"
                                            value="{{ old('desc') }}" required cols="30" rows="3"></textarea>
                                        <span style="color:red">
                                            @error('desc')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                            @endif

                            <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">Contact no</span>
                                        </label>
                                        <input type="text" id="contact" class="form-control form-control-solid"
                                            name="contact" placeholder="Contact no" value="{{ old('contact') }}"
                                            required />
                                        <span style="color:red">
                                            @error('contact')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">Work Type</span>
                                        </label>
                                        <select id="workType" name="worktype" aria-label="Select a Work Type"
                                            data-control="select2" data-placeholder="Select a Work Type..."
                                            data-allow-clear="true"
                                            class="form-select form-select-solid form-select-lg fw-bold">
                                            <option></option>
                                            @foreach ($allWorkTypes as $workType)
                                                <option value="{{ $workType->id }}">{{ $workType->name }}</option>
                                            @endforeach
                                        </select>
                                        <span style="color:red">
                                            @error('worktype')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                                <label class="fs-6 fw-bold form-label">
                                    <span>Location</span>
                                </label>
                                <input type="text" id="start-location" class="form-control form-control-solid"
                                    name="start_location" placeholder="Search Your Location"
                                    value="{{ old('start_location') }}">
                                <div id="map1" class="mt-1" style="width:100%;height:280px;"></div>

                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span>Latitude</span>
                                        </label>
                                        <input type="text" id="start_lat" class="form-control form-control-solid"
                                            name="latitude" placeholder="Latitude" value="{{ old('start_latitude') }}"
                                            readonly />
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span>Longitude</span>
                                        </label>
                                        <input type="text" id="start_long" class="form-control form-control-solid"
                                            name="longitude" placeholder="Longitude"
                                            value="{{ old('start_longitude') }}" readonly />
                                    </div>
                                </div>
                            </div>
                            <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">Order From</span>
                                        </label>
                                        <select id="orderFrom" name="orderFrom" aria-label="Select a Order From"
                                            data-control="select2" data-placeholder="Select a Order From..."
                                            data-allow-clear="true"
                                            class="form-select form-select-solid form-select-lg fw-bold">
                                            <option value="truck">Truck</option>
                                            <option value="container">Container</option>
                                            <option value="ground">Ground</option>
                                        </select>
                                        <span style="color:red">
                                            @error('quantity')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">Order To</span>
                                        </label>
                                        <select id="orderTo" name="orderTo" aria-label="Select a Order To"
                                            data-control="select2" data-placeholder="Select a Order To..."
                                            data-allow-clear="true"
                                            class="form-select form-select-solid form-select-lg fw-bold">
                                            <option value="truck">Truck</option>
                                            <option value="container">Container</option>
                                            <option value="ground">Ground</option>
                                        </select>
                                        <span style="color:red">
                                            @error('orderTo')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">No. of Container</span>
                                        </label>
                                        <input type="number" id="no_container" class="form-control form-control-solid"
                                            name="no_container" placeholder="Enter No. of Container"
                                            value="{{ old('no_container') }}" required />
                                        <span style="color:red">
                                            @error('no_container')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3 mb-5"></label> <br>
                                        <button type="button" class="btn btn-success addContainerDetails">Add
                                            details</button>
                                    </div>
                                </div>
                            </div>
                            <div class="row row-cols-1 row-cols-sm-5 rol-cols-md-1 row-cols-lg-5 containerDetailsHtml">
                            </div>

                            <div class="row row-cols-1 row-cols-sm-3 rol-cols-md-1 row-cols-lg-3">
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">Total Quantity</span>
                                        </label>
                                        <input type="number" id="total_quantity" class="form-control form-control-solid"
                                            name="total_quantity" placeholder="Total Quantity"
                                            value="{{ old('quantity') }}" readonly />
                                        <span style="color:red">
                                            @error('quantity')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">Total Size (in KG)</span>
                                            <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                                                title="Size is Auto converted in KG, Based on your quanity and selection of cargo."></i>
                                        </label>
                                        <input type="text" id="total_size" class="form-control form-control-solid"
                                            name="total_size" placeholder="Total Size" value="{{ old('size') }}"
                                            readonly />
                                        <span style="color:red">
                                            @error('size')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">Rate</span>
                                        </label>
                                        <input type="number" id="rate" class="form-control form-control-solid"
                                            name="rate" placeholder="Rate" value="{{ old('rate') }}" readonly />
                                        <span style="color:red">
                                            @error('rate')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">Distance (in meter)</span>
                                        </label>
                                        <input type="number" id="distance" class="form-control form-control-solid"
                                            name="distance" placeholder="Distance" value="{{ old('distance') }}"
                                            required />
                                        <span style="color:red">
                                            @error('distance')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">Height (in feet)</span>
                                        </label>
                                        <input type="number" id="height" class="form-control form-control-solid"
                                            name="height" placeholder="Height" value="{{ old('height') }}" required />
                                        <span style="color:red">
                                            @error('height')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="row row-cols-1 row-cols-sm-2 rol-cols-md-1 row-cols-lg-2">
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">Start Date Time</span>
                                        </label>
                                        <input type="text" id="start_time"
                                            class="form-control form-control-solid datetimepicker" name="start_time"
                                            placeholder="Start Date Time" value="{{ old('start_time') }}" required />
                                        <span style="color:red">
                                            @error('start_time')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold form-label mt-3">
                                            <span class="required">End Date Time</span>
                                        </label>
                                        <input type="text" id="end_time"
                                            class="form-control form-control-solid datetimepicker" name="end_time"
                                            placeholder="End Date Time" value="{{ old('end_time') }}" required />
                                        <span style="color:red">
                                            @error('end_time')
                                                {{ $message }}
                                            @enderror
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold form-label mt-3">
                                        <span class="required">Documents</span>
                                    </label>
                                    <textarea type="text" id="documents" class="form-control form-control-solid" name="documents"
                                        placeholder="Documents" value="{{ old('documents') }}" required cols="30" rows="3"></textarea>
                                    <span style="color:red">
                                        @error('documents')
                                            {{ $message }}
                                        @enderror
                                    </span>
                                </div>
                            </div>

                            <div class="separator mb-6"></div>
                            <div class="d-flex justify-content-end">
                                <button type="submit" data-kt-contacts-type="submit" class="btn btn-primary">
                                    <span class="indicator-label">Save</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"
        integrity="sha512-K/oyQtMXpxI4+K0W7H25UopjM8pzq0yrVdFdG21Fh5dBe91I40pDd9A4lzNlHPHBIP2cwZuoxaUSX0GJSObvGA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
    <script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.datetimepicker, .datetimepicker').flatpickr({
                enableTime: true,
                minDate: "today",
                dateFormat: "Y-m-d H:i:S",
            });

            $('#transaction_add_form').validate({
                rules: {
                    title: {
                        required: true
                    },
                    warehouse: {
                        required: true
                    },
                    desc: {
                        required: true
                    },
                    contact: {
                        required: true
                    },
                    worktype: {
                        required: true
                    },
                    orderFrom: {
                        required: true
                    },
                    orderTo: {
                        required: true
                    },
                    total_quantity: {
                        required: true
                    },
                    total_size: {
                        required: true
                    },
                    rate: {
                        required: true
                    },
                    distance: {
                        required: true
                    },
                    height: {
                        required: true
                    },
                    start_time: {
                        required: true
                    },
                    end_time: {
                        required: true
                    },
                    documents: {
                        required: true
                    },
                },
                messages: {
                    title: {
                        required: "Please select Title"
                    },
                    warehouse: {
                        required: "Please select Warehouse"
                    },
                    desc: {
                        required: "Please enter Description"
                    },
                    contact: {
                        required: "Please enter Contact"
                    },
                    worktype: {
                        required: "Please enter Work Type"
                    },
                    orderFrom: {
                        required: "Please select Order From"
                    },
                    orderTo: {
                        required: "Please select Order To"
                    },
                    total_quantity: {
                        required: "Please enter Total Quantity"
                    },
                    total_size: {
                        required: "Please select Total Size"
                    },
                    rate: {
                        required: "Please Enter Rate"
                    },
                    distance: {
                        required: "Please enter Distance"
                    },
                    height: {
                        required: "Please enter Height"
                    },
                    start_time: {
                        required: "Please select Start Time"
                    },
                    end_time: {
                        required: "Please select End Time"
                    },
                    documents: {
                        required: "Please enter Documents"
                    },
                }
            });

            var _token = `{{ csrf_token() }}`;

        });
    </script>
@endpush