@extends('header.header')

@section('content')
    @if (session('Time Out Offer'))
        <div class="alert alert-danger text-center">
            {{ session('Time Out Offer') }}
        </div>
    @endif

    {{-- start Custom Header Page --}}
    <div class="header pb-8 pt-5 pt-lg-8 d-flex align-items-center" style="min-height: 300px;">
        <!-- Mask -->
        <span class="mask bg-gradient-default opacity-8"></span>
        <!-- Header container -->
        <div class="container-fluid d-flex align-items-center">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <h1 class="display-2 text-white">{{ __('Create Offer') }}</h1>
                </div>
            </div>
        </div>
    </div>
    {{-- end Custom Header Page --}}

    <!-- Page content -->
    <div class="container-fluid mt--7">
        <div class="row">

            <div class="col-xl-12 order-xl-1">
                <div class="card bg-secondary shadow">
                    <div class="card-header bg-white border-0">
                        <div class="row align-items-center">
                            <div class="col-12">
                                <h3 class="mb-0">{{ __('Create Offer') }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('offer.store') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="input-phone_number">{{ __('Image') }}
                                        </label>
                                        <input type="file" id="input-phone_number" name="image"
                                            class="form-control @if ($errors->has('image')) is-invalid @endif"
                                            placeholder="" value="Jesse"
                                            accept="image/x-png,image/gif,image/jpeg,image/png,image/jpg,image/svg">
                                    </div>
                                    @error('image')
                                        <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label" for="input-=name">{{ __('Offer In') }}</label>
                                        <select name="OfferIn" value="{{ inputValue('OfferIn') }}" id="OfferIn"
                                            class="form-control @if ($errors->has('OfferIn')) is-invalid @endif">
                                            @if (inputValue('OfferIn') == 1 || inputValue('OfferIn') == null)
                                                <option value="1" selected>Store</option>
                                                <option value="2">Category</option>
                                                <option value="3">Item</option>
                                            @elseif(inputValue('OfferIn') == 2)
                                                <option value="1">Store</option>
                                                <option value="2" selected>Category</option>
                                                <option value="3">Item</option>
                                            @elseif(inputValue('OfferIn') == 3)
                                                <option value="1">Store</option>
                                                <option value="2">Category</option>
                                                <option value="3" selected>Item</option>
                                            @endif
                                        </select>
                                    </div>
                                    @error('OfferIn')
                                        <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                                @if (old('OfferIn') == 1 || old('OfferIn') == null)
                                    <div class="col-lg-6" id="store">
                                        <div class="form-group">
                                            <label class="form-control-label" for="input-=name">{{ __('Store') }}</label>
                                            <select name="store" value="{{ inputValue('store') }}"
                                                class="form-control @if ($errors->has('store')) is-invalid @endif"
                                                id="storeVal">
                                                <option selected disabled>Choose Store</option>
                                                @foreach ($stores as $store)
                                                    <option value="{{ $store->id }}">
                                                        {{ $store->lang->translate_title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @error('store')
                                            <div class="input-error">{{ 'The store field is required when offer in is store' }}
                                            </div>
                                        @enderror
                                    </div>
                                @endif

                                @if (old('OfferIn') == 2)
                                    <div class="col-lg-6" id="category"
                                        @if (old('OfferIn') == 2) style="display:block;" @endif>
                                        <div class="form-group">
                                            <label class="form-control-label"
                                                for="input-=name">{{ __('Category') }}</label>
                                            <select name="category" id=""
                                                class="form-control @if ($errors->has('category')) is-invalid @endif"
                                                id="categoryVal">
                                                <option selected disabled>Choose Category</option>
                                                @foreach ($categories as $category)
                                                    <option value="{{ $category->id }}">
                                                        {{ $category->name_ . \Illuminate\Support\Facades\App::getLocale() == 'en' ? $category->name_en : $category->name_ar }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @error('category')
                                            <div class="input-error">
                                                {{ 'The category field is required when offer in is category' }}</div>
                                        @enderror
                                    </div>
                                @endif
                                <div class="col-lg-6" id="category" style="display:none">
                                    <div class="form-group">
                                        <label class="form-control-label" for="input-=name">{{ __('Category') }}</label>
                                        <select name="category" id=""
                                            class="form-control @if ($errors->has('category')) is-invalid @endif"
                                            id="categoryVal">
                                            <option selected disabled>Choose Category</option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">
                                                    {{ $category->name_ . \Illuminate\Support\Facades\App::getLocale() == 'en' ? $category->name_en : $category->name_ar }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('category')
                                        <div class="input-error">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2">
                                    <td>Date From :<input type="date" name="DateFrom"
                                            style="border-radius: 7px;padding: 10px;margin:15px 15px 0px 15px"
                                            class="form-control @if ($errors->has('DateFrom')) is-invalid @endif"
                                            value="{{ inputValue('DateFrom') }}"></td>
                                    <td>
                                        @error('DateFrom')
                                            <div class="input-error"
                                                style="border-radius: 7px;padding: 10px;margin:0px 15px 15px 15px">
                                                {{ $message }}</div>
                                        @enderror
                                    </td>
                                </div>
                                <div class="col-lg-2">
                                    <td>Date To :<input type="date" name="DateTo"
                                            style="border-radius: 7px;padding: 10px;margin:15px 15px 0px 15px"
                                            class="form-control @if ($errors->has('DateTo')) is-invalid @endif"
                                            value="{{ inputValue('DateTo') }}"></td>
                                    <td>
                                        @error('DateTo')
                                            <div class="input-error"
                                                style="border-radius: 7px;padding: 10px;margin:0px 15px 15px 15px">
                                                {{ $message }}</div>
                                        @enderror
                                    </td>
                                </div>

                                <div class="col-lg-2">
                                </div>
                                <div class="col-lg-2" id="offerType">
                                    <td>
                                        <div style="margin-bottom: 15px">{{ __('Offer Value Type') }}:</div>
                                        <select name="offerValueType"
                                            class="offerValueType form-control @if ($errors->has('offerValueType')) is-invalid @endif">
                                            @if (inputValue('offerValueType') == 1 || inputValue('offerValueType') == null)
                                                <option value="1" selected>By Percentage</option>
                                                <option value="2">By Value</option>
                                                <option value="3">Free Delivery</option>
                                                <option value="4">Discount Delivery</option>
                                                <option value="5">Delivery Value</option>
                                            @elseif(inputValue('offerValueType') == 2)
                                                <option value="1">By Percentage</option>
                                                <option value="2" selected>By Value</option>
                                                <option value="3">Free Delivery</option>
                                                <option value="4">Discount Delivery</option>
                                                <option value="5">Delivery Value</option>
                                            @elseif(inputValue('offerValueType') == 3)
                                                <option value="1">By Percentage</option>
                                                <option value="2">By Value</option>
                                                <option value="3" selected>Free Delivery</option>
                                                <option value="4">Discount Delivery</option>
                                                <option value="5">Delivery Value</option>
                                            @elseif(inputValue('offerValueType') == 4)
                                                <option value="1">By Percentage</option>
                                                <option value="2">By Value</option>
                                                <option value="3">Free Delivery</option>
                                                <option value="4" selected>Discount Delivery</option>
                                                <option value="5">Delivery Value</option>
                                            @elseif(inputValue('offerValueType') == 5)
                                                <option value="1">By Percentage</option>
                                                <option value="2">By Value</option>
                                                <option value="3">Free Delivery</option>
                                                <option value="4">Discount Delivery</option>
                                                <option value="5" selected>Delivery Value</option>
                                            @endif
                                        </select>
                                        @error('offerValueType')
                                            <div class="input-error"
                                                style="border-radius: 7px;padding: 10px;margin:0px 15px 15px 15px">
                                                {{ $message }}</div>
                                        @enderror
                                    </td>
                                </div>
                                <div class="col-lg-2" id="offerTypeItem" style="display:none;">
                                    <td>
                                        <div style="margin-bottom: 15px">{{ __('Offer Value Type') }}:</div>
                                        <select name="offerValueType"
                                            class="offerValueType form-control @if ($errors->has('offerValueType')) is-invalid @endif">
                                            @if (inputValue('offerValueType') == 1 || inputValue('offerValueType') == null)
                                                <option value="1" selected>By Percentage</option>
                                                <option value="2">By Value</option>
                                                <option value="3">Free Delivery</option>
                                                <option value="4">Discount Delivery</option>
                                                <option value="5">Delivery Value</option>
                                            @elseif(inputValue('offerValueType') == 2)
                                                <option value="1">By Percentage</option>
                                                <option value="2" selected>By Value</option>
                                                <option value="3">Free Delivery</option>
                                                <option value="4">Discount Delivery</option>
                                                <option value="5">Delivery Value</option>
                                            @elseif(inputValue('offerValueType') == 3)
                                                <option value="1">By Percentage</option>
                                                <option value="2">By Value</option>
                                                <option value="3" selected>Free Delivery</option>
                                                <option value="4">Discount Delivery</option>
                                                <option value="5">Delivery Value</option>
                                            @elseif(inputValue('offerValueType') == 4)
                                                <option value="1">By Percentage</option>
                                                <option value="2">By Value</option>
                                                <option value="3">Free Delivery</option>
                                                <option value="4" selected>Discount Delivery</option>
                                                <option value="5">Delivery Value</option>
                                            @elseif(inputValue('offerValueType') == 5)
                                                <option value="1">By Percentage</option>
                                                <option value="2">By Value</option>
                                                <option value="3">Free Delivery</option>
                                                <option value="4">Discount Delivery</option>
                                                {{--                                               <option value="5" selected>Delivery Value</option> --}}
                                            @endif
                                        </select>
                                    </td>
                                    <td>
                                        @error('offerValueType')
                                            <div class="input-error"
                                                style="border-radius: 7px;padding: 10px;margin:0px 15px 15px 15px">
                                                {{ $message }}</div>
                                        @enderror
                                    </td>
                                </div>

                                @if (old('offerValueType') != 3)
                                    <div class="col-lg-2" id="value">
                                        <td>Value:<input type="number" name="value"
                                                class="form-control @if ($errors->has('value')) is-invalid @endif"
                                                style="border-radius: 7px;padding: 10px;margin: 15px" min="0"
                                                placeholder="Value"></td>
                                        @error('value')
                                            <div class="input-error"
                                                style="border-radius: 7px;padding: 10px;margin:0px 15px 15px 15px">
                                                {{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-lg-6">
                                    </div>
                                    <div class="col-lg-6" id="valueDelivery" style="display: none">
                                        <td>Value:<br><input type="number" name="valueDelivery"
                                                class="form-control @if ($errors->has('value')) is-invalid @endif"
                                                style="border-radius: 7px;padding: 10px;margin: 15px" min="0"
                                                placeholder="Value"></td>
                                        @error('valueDelivery')
                                            <div class="input-error"
                                                style="border-radius: 7px;padding: 10px;margin:0px 15px 15px 15px">
                                                {{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif
                            </div>
                            <div class="row">
                                <div class="col-lg-5 mb-6">
                                    @if (Session::has('message'))
                                        <p class="text-danger">{{ Session::get('message') }}</p>
                                    @endif
                                    <table class="table align-items-center table-flush">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox"
                                                            id="selectAllDays">
                                                        <label class="form-check-label" for="days">
                                                            {{ __('Day') }}
                                                        </label>
                                                    </div>
                                                </th>
                                                <th>{{ __('From') }}</th>
                                                <th>{{ __('To') }}</th>
                                            </tr>
                                        </thead>
                                        @php
                                            $days = ['Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
                                            //
                                        @endphp
                                        <tbody class="list" id="myTable">
                                            @foreach ($days as $index => $day)
                                                <tr>
                                                    <td>
                                                        <input class="form-check" type="checkbox"name="day[]"
                                                            value="{{ $day }}">
                                                        <label class="form-check" id="days">
                                                            {{ $day }}
                                                        </label>
                                                    </td>
                                                    <td><input type="time" name="timeFrom[]"
                                                            style="border-radius: 7px;padding: 10px"
                                                            class="form-control @if ($errors->has('timeFrom.' . $index)) is-invalid @endif"
                                                            value="{{ old('timeFrom.' . $index) }}"></td>
                                                    <td><input type="time" name="timeTo[]"
                                                            style="border-radius: 7px;padding: 10px"
                                                            class="form-control @if ($errors->has('timeTo.' . $index)) is-invalid @endif"
                                                            value="{{ old('timeTo.' . $index) }}"></td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-lg-7"
                                    @if (old('OfferIn') == 3) style="height:500px;overflow-y: scroll;display:block" @endif
                                    style="height:500px;overflow-y: scroll;display: none" id="itemsTable">
                                    <label class="form-control-label" for="input-=name">{{ __('Items Table') }}</label>
                                    <table class="table align-items-center table-flush" id="item">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>{{ __('ID') }}</th>
                                                <th>{{ __('Name') }}</th>
                                                <th>{{ __('Image') }}</th>
                                                <th>{{ __('Price') }}</th>
                                                <th>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="selectAll">
                                                        <label class="form-check-label" for="flexCheckDefault">
                                                            {{ __('Select All') }}
                                                        </label>
                                                    </div>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody class="list" id="myTable">
                                            @foreach ($items as $item)
                                                <tr>
                                                    <td>{{ $item->id }}</td>
                                                    <td>{{ $item->lang->getTitleAttribute() }}</td>
                                                    <td><img src="{{ $item->item_image }}" width="70px"
                                                            height="70px"></td>
                                                    <td>{{ $item->price }}</td>
                                                    <td>
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                name="checked[]" value="{{ $item->id }}"
                                                                id="flexCheckDefault" data-id="{{ $item->id }}">
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <hr class="my-4" />
                            <div class="col-lg-4  mt-5 mb-3 m-auto">
                                <button class="btn btn-primary form-control ">{{ __('Create') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js-scripts')
    <script type="text/javascript" src="{{ asset('assets/js/plugins/select2.min.js') }}"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>
    <script type="text/javascript">
        if (document.location.hostname == 'pratikborsadiya.in') {
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                    m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-72504830-1', 'auto');
            ga('send', 'pageview');
        }
        $('#demoSelect').select2();
    </script>
    <script>
        $('.offerValueType').change(function() {
            let value = $(this).val();
            if (value == 3) {
                $('#delivery').css("display", "block");
                $('#valueDelivery').css("display", "none");
                $('#value').hide();
            } else {
                $('#delivery').css("display", "none");
                $('#valueDelivery').css("display", "none");
                $('#value').show();
            }
        });
        $('#freeDelivery').change(function() {
            let value = $(this).val();
            console.log(value)
            if (value == 1) {
                $('#valueDelivery').css("display", "none");
            } else {
                $('#valueDelivery').css("display", "block");
            }
        });
        $(document).ready(function() {
            $('#item').DataTable({
                "paging": false,
                "ordering": false,
                "info": false
            });
        });
        $('#OfferIn').change(function() {
            let value = $(this).val();
            if (value == 3) {
                $('#itemsTable').css("display", "block");
                $('#offerTypeItem').css("display", "block");
                $('#store').hide();
                $('#category').css("display", "none");
                $('#offerType').css("display", "none");
                $('#ByPercentageOffer').css("display", "none");
            } else if (value == 2) {
                $('#store').hide();
                $('#category').css("display", "block");
                $('#itemsTable').css("display", "none");
                $('#offerTypeItem').css("display", "none");
                $('#offerType').css("display", "block");
            }
            if (value == 1) {
                $('#store').show();
                $('#category').css("display", "none");
                $('#itemsTable').css("display", "none");
                $('#offerTypeItem').css("display", "none");
                $('#offerType').css("display", "block");
            }
        })
        $(function() {
            $('#selectAll').click(function() {
                if ($(this).prop('checked')) {
                    $('.form-check-input').prop('checked', true);
                } else {
                    $('.form-check-input').prop('checked', false);
                }
            });
        });
        $(function() {
            $('#selectAllDays').click(function() {
                if ($(this).prop('checked')) {
                    $('.form-check').prop('checked', true);
                } else {
                    $('.form-check').prop('checked', false);
                }
            });
        });
        $('#flexCheckDefault').click(function() {
            $('#valueOffer').css("display", "block");
        })
        $("#store").change(function() {
            //Read the fields
            let store = $('#storeVal').val();
            let url = window.location.href;
            $.ajax({
                type: "GET",
                url: url,
                data: {
                    "StoreId": store
                },
                success: function(response) {
                    console.log(response);
                    if (response.status == 1) {
                        location.reload();
                    }
                },
                error: function() {
                    console.error("you have error");
                }
            });
            //Note: form may not be 'sent'!
            return false;
        });
    </script>
    <script>
        $(function() {
            $('.bs-timepicker').timepicker();
        });
    </script>
@endsection