@extends('layouts.super_admin.app')

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">

    <!-- FlatPickr CSS -->
    <link rel="stylesheet" href="{{asset('build/assets/libs/flatpickr/flatpickr.min.css')}}">

    <style>
        .flatpickr-day.today {
            background-color: #ffffff00 !important;
        }
    </style>

    @error('product')
        <style>
            .select2 .select2-selection .select2-selection__rendered {
                border: 1px solid #e23e3d !important;
            }
            
        </style>
    @enderror
@endsection

@section('content')
    <!-- PAGE-HEADER -->
    <div class="page-header d-flex align-items-center justify-content-between border-bottom mb-4">
        <h1 class="page-title">{{ __('global.add_order') }}</h1>
    </div>
    <!-- PAGE-HEADER END -->

    <!-- CONTAINER -->
    <div class="main-container container-fluid">
        <form action="{{ route('superadmin.add.orders') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row card-body">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">{{ __('global.manually_add_booking') }}</h3>
                                        </div> 

                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-xl-6 form-group mb-4">
                                                    <label for="title" class="form-label">{{ __('global.user_company_name') }} <span class="text-secondary">*</span></label>
                                                    <input type="text" class="form-control @error('title') is-invalid is-text-invalid @enderror" id="title" placeholder="{{ __('global.enter_name') }}" name="title" value="{{ old('title') }}">
    
                                                    @error('title')
                                                        <span class="invalid-feedback d-block" role="alert">
                                                            {{ $message }}
                                                        </span>
                                                    @enderror
                                                </div>
    
                                                <div class="col-xl-6 form-group mb-4">
                                                    <label for="phone" class="form-label">{{ __('global.phone') }} <span class="text-secondary">*</span></label>
                                                    <input type="text" class="form-control @error('phone') is-invalid is-text-invalid @enderror" id="phone" placeholder="{{ __('global.enter_phone') }}" name="phone" value="{{ old('phone') }}">
    
                                                    @error('phone')
                                                        <span class="invalid-feedback d-block" role="alert">
                                                            {{ $message }}
                                                        </span>
                                                    @enderror
                                                </div>
    
                                                <div class="col-xl-6 mb-4">
                                                    <label for="input-datetime-local" class="form-label">{{ __('global.start_date_time') }} <span class="text-secondary">*</span></label>
                                                    <div class="input-group">
                                                        <div class="input-group-text">
                                                            <i class="fa fa-clock-o tx-16 lh-0 op-6"></i>
                                                        </div>
                                                        <input type="text" class="form-control @error('start_date') is-invalid is-text-invalid @enderror" id="startDate" name="start_date" placeholder="{{ __('global.select_start_date') }}" value="">

                                                        @error('start_date')
                                                            <span class="invalid-feedback d-block" role="alert">
                                                                {{ $message }}
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-xl-6 mb-4">
                                                    <label for="input-datetime-local" class="form-label">{{ __('global.end_date_time') }} <span class="text-secondary">*</span></label>
                                                    <div class="input-group">
                                                        <div class="input-group-text">
                                                            <i class="fa fa-clock-o tx-16 lh-0 op-6"></i>
                                                        </div>
                                                        <input type="text" class="form-control @error('end_date') is-invalid is-text-invalid @enderror" id="endDate" name="end_date" placeholder="{{ __('global.select_end_date') }}" value="">

                                                        @error('end_date')
                                                            <span class="invalid-feedback d-block" role="alert">
                                                                {{ $message }}
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="col-xl-6 mb-4">
                                                    <label for="product" class="form-label">{{ __('global.products') }} <span class="text-secondary">*</span></label>

                                                    <select class="js-example-basic-single select2-hidden-accessible form-product @error('product') is-select2-invalid @enderror" name="product" data-select2-id="select2-data-1-333" tabindex="-1" aria-hidden="true" id="product">
                                                        <option value="">{{ __('global.select_product') }}</option>

                                                        @foreach($products as $product)
                                                            <option value="{{ $product->id }}" {{ old('product') == $product->id ? 'selected' : '' }}>{{ json_decode($product->title, true)[app()->getLocale()] ?? '' }}</option>
                                                        @endforeach
                                                    </select>

                                                    @error('product')
                                                        <span class="invalid-feedback d-block" role="alert">
                                                            {{ $message }}
                                                        </span>
                                                    @enderror
                                                </div>

                                                <div class="col-xl-6 mb-5">
                                                    <label for="price" class="form-label">{{ __('global.price') }} <span class="text-secondary">*</span></label>
                                                    <input type="text" class="form-control price-input @error('price') is-invalid is-text-invalid @enderror" id="price" name="price" value="{{ old('price') }}" placeholder="{{ __('global.enter_price') }} (0.00)">

                                                    @error('price')
                                                        <span class="invalid-feedback d-block" role="alert">
                                                            {{ $message }}
                                                        </span>
                                                    @enderror
                                                </div>

                                                <div class="col-xl-6 mb-0 mx-2">
                                                    <div class="custom-toggle-switch d-flex align-items-center">
                                                        <input id="status" name="status" type="checkbox" {{ old('status') == 'on' ? 'checked' : '' }}>
                                                        <label for="status" class="label-primary"></label>
                                                        <span class="fs-13 ms-3 mb-2">{{ __('global.not_paid') }}/{{ __('global.paid') }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-end m-2 mx-3">
                                        <input type="submit" class="btn btn-primary" value="{{ __('global.create') }}">
                                        <a href="{{ route('superadmin.get.all.orders') }}" class="btn btn-default mx-2">{{ __('global.go_back') }}</a>
                                    </div>  
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!-- ROW-2 END -->
    </div>
    <!-- CONTAINER CLOSED -->
@endsection

@section('scripts')
    <!-- Select2 Cdn -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <!-- Internal Select-2.js -->
    @vite('resources/assets/js/select2.js')

    <!-- Date & Time Picker JS -->
    <script src="{{asset('build/assets/libs/flatpickr/flatpickr.min.js')}}"></script>

    <!-- Validation JS -->
    <script src="{{ asset('assets/js/validation.js') }}"></script>

    <script>
        /* For DateTimePicker with Limited Time Range */
        flatpickr("#startDate", {
            enableTime: true,
            dateFormat: "Y-m-d H:i",
            time_24hr: true,
            minuteIncrement: 30,
            defaultDate: null,
            minDate: "today"
        });

        flatpickr("#endDate", {
            enableTime: true,
            dateFormat: "Y-m-d H:i",
            time_24hr: true,
            minuteIncrement: 30,
            defaultDate: null,
            minDate: "today"
        });

        // START Price Inputs

        function priceInputGenerator(inputId) {
            $(inputId).on('keyup', function(){
                var price = $(this).val().replace(/[^\d]/g,'');    
                var pre, dec;
                var delimiter = '.';
                
                var result = price;
            
                if (price.length > 3 && price.charAt(0) == '0') {
                        price = price.substr(1);
                }
                
                if (price.length > 2) {
                        pre = price.slice(0,-2);
                        dec = price.substr( (price.length-2), 2);
                        result = pre + delimiter + dec;
                }
                
                $(this).val('').val(result);
                
            });
        }

        priceInputGenerator('.price-input');

        // END Price Inputs
    </script>
@endsection