@extends('layouts.master')

@section('title', 'New Offer | Alboosh - Timeless authenticity, born of the desert')

@section('title-topbar', 'New Offer')

<!-- css insert -->
@section('css')

<!-- select 2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css" integrity="sha512-aD9ophpFQ61nFZP6hXYu4Q/b/USW7rpLCQLX6Bi0WJHXNO7Js/fUENpBQf/+P4NtpzNX0jSgR5zVvPOJp+W2Kg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- select 2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css" integrity="sha512-aD9ophpFQ61nFZP6hXYu4Q/b/USW7rpLCQLX6Bi0WJHXNO7Js/fUENpBQf/+P4NtpzNX0jSgR5zVvPOJp+W2Kg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote.min.css" integrity="sha512-m52YCZLrqQpQ+k+84rmWjrrkXAUrpl3HK0IO4/naRwp58pyr7rf5PO1DbI2/aFYwyeIH/8teS9HbLxVyGqDv/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />


<!-- boostrap datepicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />


@endsection


<!-- content insert -->
@section('content')

<div class="container-fluid px-0 px-md-2 mt-3">

    <!-- page title link -->
    <div class="d-sm-flex align-items-center justify-content-between mb-3">
        <span class="mb-0">
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.home') }}">Dashboard |</a>
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.unit_offer.index') }}">Offers | </a>
            <a class="text-gray-300">New Unit</a>
        </span>
    </div>

    <div class="card card-input shadow mb-3 pb-3">
        <!-- Card Header - Dropdown -->
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 fw-bold text-gray-500"><i class="fas fa-map-marker-alt me-1"></i> New Offer</h6>
        </div>

        <!-- Card Body -->
        <div class="card-body px-4 px-md-5">

            @foreach ($errors->all() as $error)
            <div class="text-red"><i class="fas fa-exclamation me-1"></i> {{ $error }}</div>
            @endforeach

            <form id="myform" method="POST" action="{{ route('sett.unit_offer.store') }}" enctype="multipart/form-data">
                @csrf

                <div class="row mb-2">

                    <div class="col-12 col-md-3 mb-2">
                        <label class="form-label">Name
                            <small>(required)</small></label>
                        <input name="name" type="text" class="form-control @error('name') is-invalid @enderror" placeholder="Offer Name .." required>
                    </div>

                    <div class="col-12 col-md-4 mb-3">
                        <label class="form-label">{{ __('basic.hotels') }}
                            <small>({{ __('basic.required') }})</small></label>
                        <select id="unit_id" class="js-example-basic-single select2-hidden-accessible @error('unit_id') is-invalid @enderror" name="unit_id" required>
                            @foreach ($units as $item)
                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                        <div id="branch_id-js-error-valid"></div>
                        @error('unit_id')
                        <span class="error-msg-form">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>

                    <div class="col-12 col-md-2 mb-3">
                        <label class="form-label">{{ __('basic.belong to') }}
                            <small>({{ __('basic.required') }})</small></label>
                        <select id="debtor_id" class="js-example-basic-single select2-hidden-accessible @error('debtor_id') is-invalid @enderror" name="debtor_id">
                            <option value="no_broker">No Broker</option>
                            @foreach ($debtors as $item)
                            <option value="{{ $item->id }}">{{ $item->company_name }}</option>
                            @endforeach
                        </select>
                        <div id="debtor_id-js-error-valid"></div>

                        @error('debtor_id')
                        <span class="error-msg-form">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>

                    <div class="col-12 col-md-2 mb-3">
                        <label class="form-label">{{ __('basic.type') }}
                            <small>({{ __('basic.required') }})</small></label>
                        <select id="type" class="js-example-basic-single select2-hidden-accessible @error('type') is-invalid @enderror" name="type">
                            <option value="1">Unlimited Rooms</option>
                            <option value="2">Limited Rooms</option>
                        </select>
                        <div id="type-js-error-valid"></div>

                        @error('type')
                        <span class="error-msg-form">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>

                    <div class="col-1 fw-bold d-flex justify-content-center align-self-center">
                        <span id="service_final_info" class="me-2">{{ __('favorite') }}</span>
                        <div class="switch-checkbox">
                            <input class="done_btn" name="favorite" type="checkbox" value="1" id="favorite_check"><label for="favorite_check" class="ms-auto me-auto">Toggle</label>
                        </div>
                        @error('favorite')
                        <span class="error-msg-form">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>

                </div>

                <hr>

                <h6 class="text-gray-400 mb-">
                    {{ __('basic.rooms') }}
                </h6>

                <div class="row" id="prices_cont">

                </div>

                <div class="my-3 text-end">
                    <div data-bs-toggle="modal" data-bs-target="#new_price_modal" class="btn btn-user not_accepted-color-btn rounded-pill"><i class="fas fa-plus"></i> New Price
                    </div>
                </div>

                <div class="d-flex justify-content-end mt-4 mb-2">
                    <input type="submit" name="next" class="next-form-steps btn btn-primary action-button-next" value="Send">
                </div>

            </form>
        </div>

    </div>

</div>






<!-- Modal lab insert data -->
<div class="modal fade" id="new_price_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">


        <div class="modal-content b-r-s-cont border-0">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-dollar-sign me-1"></i>
                    {{ __('basic.price') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal content -->
            <div class="modal-body px-5 py-3">

                <form id="add_price_modal">

                    <div class="row mb-2">

                        <div class="col-12 mb-2">
                            <label class="form-label">Room Type
                                <small>(required)</small></label>
                            <select class="js-example-basic-single select2-hidden-accessible @error('room_cat_id') is-invalid @enderror" name="room_cat_price" id="room_cat_id" required>
                                @foreach ($room_types as $item)
                                <option value="{{ $item->id }}">
                                    {{ $item->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12 mb-2">
                            <label class="form-label">Extra Info
                                <small>(required)</small></label>
                            <input id="info_price" name="info_price" type="text" class="form-control @error('info_price') is-invalid @enderror" placeholder="Extra Info Name .." required>
                        </div>

                        <div class="col-12 mb-2">
                            <label class="form-label">Room View
                                <small>(required)</small></label>
                            <select class="js-example-basic-single select2-hidden-accessible @error('room_view_cat_id') is-invalid @enderror" name="room_view_cat_price" id="room_view_cat_id" required>
                                @foreach ($room_views as $item)
                                <option value="{{ $item->id }}">
                                    {{ $item->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12 mb-2">
                            <label class="form-label">Meal
                                <small>(required)</small></label>
                            <select class="js-example-basic-single select2-hidden-accessible @error('meal_cat_id') is-invalid @enderror" name="meal_cat_price" id="meal_cat_id" required>
                                @foreach ($meals as $item)
                                <option value="{{ $item->id }}">
                                    {{ $item->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12 mb-2">
                            <label class="form-label">From
                                <small>(required)</small></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text"><i class="bi bi-calendar2-week-fill"></i>
                                    </div>
                                </div>
                                <input name="from_price" id="from_price" type="text" class="form-control hasdatetimepicker" placeholder="YYYY-MM-DD" required>
                            </div>
                        </div>

                        <div class="col-12 mb-2">
                            <label class="form-label">To
                                <small>(required)</small></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text"><i class="bi bi-calendar2-week-fill"></i>
                                    </div>
                                </div>
                                <input name="to_price" id="to_price" type="text" class="form-control hasdatetimepicker" placeholder="YYYY-MM-DD" required>
                            </div>
                        </div>

                        <div class="col-12 mb-2">
                            <label class="form-label">{{ __('basic.market') }}
                                <small>({{ __('basic.required') }})</small></label>
                            <select class="js-example-basic-single select2-hidden-accessible @error('market') is-invalid @enderror" name="market_price" id="market_price" required multiple>
                                @foreach ($markets as $item)
                                <option value="{{ $item->id }}">
                                    {{ $item->name }}
                                </option>
                                @endforeach
                            </select>

                            <span id="market_error" class="error-msg-form"></span>

                            @error('market')
                            <span class="error-msg-form">
                                {{ $message }}
                            </span>
                            @enderror
                        </div>

                        <div class="col-12 mb-2">
                            <label class="form-label">Room Capacity
                                <small>(required)</small></label>
                            <input id="capacity_price" name="capacity_price" type="number" class="form-control @error('capacity_price') is-invalid @enderror" placeholder="Room Capacity .." required>
                        </div>

                        <div class="col-12 mb-2">
                            <label class="form-label">Room Taken
                                <small>(optional)</small></label>
                            <input id="room_taken" name="room_taken" type="number" class="form-control @error('room_taken') is-invalid @enderror" placeholder="Room Taken ..">
                        </div>

                        <div class="col-12 mb-2">
                            <label class="form-label">Buy Price
                                <small>(required)</small></label>
                            <input id="buy_price" name="buy_price" type="number" class="form-control @error('buy_price') is-invalid @enderror" placeholder="Buy Price Name .." required>
                        </div>

                        <div class="col-12 mb-2">
                            <label class="form-label">Sell Price
                                <small>(required)</small></label>
                            <input id="sell_price" name="sell_price" type="number" class="form-control @error('sell_price') is-invalid @enderror" placeholder="Sell Price Name .." required>
                        </div>

                        <div id="cont_exception">
                        </div>
                        <div class="my-3 text-end">
                            <div id="new_exception" class="btn btn-user not_accepted-color-btn rounded-pill"><i class="fas fa-plus"></i> New
                                Exception
                            </div>
                        </div>

                    </div>

                </form>
            </div>

            <div class="modal-footer">
                <div class="left-side">
                    <button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{
                        __('basic.never mind') }}</button>
                </div>
                <div class="divider"></div>
                <div class="right-side">
                    <button id="add_price" class="btn btn-default btn-link main-color">Add
                        New</button>
                </div>
            </div>
        </div>

    </div>

</div>

@endsection

<!-- js insert -->
@section('js')


<!-- validate jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    //Rules for the Validator plugin
    var $validator = $('#myform').validate({
        rules: {
            name: {
                minlength: 3,
            },
            address: {
                minlength: 3,
            },
        },
        messages: {
            email: {
                required: "We need your email address to contact you",
                email: "Your email address must be in the format of name@domain.com"
            },
            password_confirmation: {
                equalTo: "Password does not match",
            }
        },
        //for inserting erros for some inputs that makes posation problem such as selector 2 and bt datapicker
        errorPlacement: function(error, element) {
            switch (element.attr("name")) {
                case 'role':
                    error.insertAfter($("#role-js-error-valid"));
                    break;
                case 'gendar':
                    error.insertAfter($("#gendar-js-error-valid"));
                    break;
                default:
                    error.insertAfter(element);
            }

        },
    });
</script>


<!-- jquery ui datepicker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script>
    $(function() {
        $('.hasdatetimepicker').datepicker({
            todayHighlight: true,
            format: "yyyy-mm-dd",
            autoclose: true,
        })
    });
</script>

<script>
    $(document).ready(function() {

        $(document).on("click", "#new_exception", function() {

            $('#cont_exception').append(
                '<div class="row">' +
                '<hr class="mt-3">' +
                '<div class="d-flex justify-content-between"><h5 class="col-12 mb-2">Exceptions</h5><i class="fas fa-times text-red-200 clickable-item-pointer delete_exception align-self-center"></i></div>' +
                '<div class="col-12 mb-2">' +
                '<label class="form-label">Weekly <small>(required)</small></label>' +

                '<select class="js-example-basic-single select2-hidden-accessible weekend_exception" name="day_exc[]">' +
                '<option value="saturday">Saturday</option>' +
                '<option value="sunday">Sunday</option>' +
                '<option value="monday">Monday</option>' +
                '<option value="tuesday">tuesday</option>' +
                '<option value="wendnsday">Wendnsday</option>' +
                '<option value="thursday">Thursday</option>' +
                '<option value="friday">Friday</option>' +
                '</select>' +

                '</div>' +

                '<div class="col-12 mb-2">' +
                '<label class="form-label">Fixed <small>(required)</small></label>' +
                '<div class="input-group">' +
                '<div class="input-group-prepend">' +
                '<div class="input-group-text"><i class="bi bi-calendar2-week-fill"></i></div>' +
                '</div>' +
                '<input name="date_exc[]" id="date_exc" type="text" class="date_exc form-control hasdatetimepicker" placeholder="YYYY-MM-DD">' +
                '</div>' +
                '</div>' +

                '<div class="col-12 mb-2">' +
                '<label class="form-label">Buy <small>(required)</small></label>' +
                '<input id="buy_price_exc" name="buy_price_exc[]" type="number" class="buy_price_exc form-control" placeholder="Buy Price .." required>' +
                '</div>' +


                '<div class="col-12 mb-2">' +
                '<label class="form-label">Sell <small>(required)</small></label>' +
                '<input id="sell_price_exc" name="sell_price_exc[]" type="number" class="sell_price_exc form-control" placeholder="Sell Price .." required>' +
                '</div>' +

                '</div>'
            );

            $('.js-example-basic-single').select2();
            $('.hasdatetimepicker').datepicker({
                todayHighlight: true,
                format: "yyyy-mm-dd",
                autoclose: true,
            })
        });

        $(document).on("click", ".delete_exception", function() {
            $(this).parent().parent().remove();
        });

        $(document).on("click", "#add_price", function() {


            var price_length = $('.price_div').length;

            var stop = 0;
            // to validate the array of inputs
            $('.buy_price_exc').each(function() {
                if (!$('.buy_price_exc').valid()) {
                    stop = 1;
                    return false;
                }
                if (!$('.sell_price_exc').valid()) {
                    stop = 1;
                    return false;
                    return;
                }
            });

            if (stop > 0) {
                return;
            }

            // for validation
            if (!$('#add_price_modal').valid()) {
                return false;
            }

            var type = $("select[name='room_cat_price'] option:selected").val();

            var info = $('input[name="info_price"]').val();

            var view = $("select[name='room_view_cat_price'] option:selected").val();
            var meal = $("select[name='meal_cat_price'] option:selected").val();

            var from = $('input[name="from_price"]').val();
            var to = $('input[name="to_price"]').val();

            var capacity = $('input[name="capacity_price"]').val();
            var room_taken = $('input[name="room_taken"]').val();
            var buy = $('input[name="buy_price"]').val();
            var sell = $('input[name="sell_price"]').val();


            //for markts multi select
            var checkedagreeChecker = $("select[name='market_price'] option:selected");
            var joinedValues = checkedagreeChecker.map(function() {
                return this.value
            }).get().join(",");
            var markets = checkedagreeChecker.length > 0 ? joinedValues : -1;


            var checkedagreeChecker_week = $(".weekend_exception option:selected");
            var joinedValues_week = checkedagreeChecker_week.map(function() {
                return this.value
            }).get().join(",");

            var checkedagreeChecker_date = $(".date_exc");
            var joinedValues_date = checkedagreeChecker_date.map(function() {
                return this.value
            }).get().join(",");

            var checkedagreeChecker_buy = $(".buy_price_exc");
            var joinedValues_buy = checkedagreeChecker_buy.map(function() {
                return this.value
            }).get().join(",");

            var checkedagreeChecker_sell = $(".sell_price_exc");
            var joinedValues_sell = checkedagreeChecker_sell.map(function() {
                return this.value
            }).get().join(",");

            $('#prices_cont').append('<div class="row price_div"><div class="col-2"><span><i class="fas fa-dollar-sign"></i></span></div>' +
                '<div class="col-5"><h6>' + name + '</h6></div>' +
                '<div class="col-2"><h6>' + buy + ' LE</h6></div>' +
                '<div class="col-2"><h6>' + sell + ' LE</h6></div>' +
                '<div class="col-1"><h6><i class="fas fa-times text-red-200 clickable-item-pointer delete_price"></i></h6></div>' +

                '<input type="hidden" name="new_price_room_type[]" value="' + type + '" />' +
                '<input type="hidden" name="new_price_info[]" value="' + info + '" />' +
                '<input type="hidden" name="new_price_view[]" value="' + view + '" />' +
                '<input type="hidden" name="new_price_meal[]" value="' + meal + '" />' +
                '<input type="hidden" name="new_price_from[]" value="' + from + '" />' +
                '<input type="hidden" name="new_price_to[]" value="' + to + '" />' +
                '<input type="hidden" name="new_price_markets[]" value="' + markets + '" />' +
                '<input type="hidden" name="new_price_capacity[]" value="' + capacity + '" />' +
                '<input type="hidden" name="new_price_room_taken[]" value="' + room_taken + '" />' +
                '<input type="hidden" name="new_price_buy[]" value="' + buy + '" />' +
                '<input type="hidden" name="new_price_sell[]" value="' + sell + '" />' +

                '<input type="hidden" name="' + price_length + 'exception_week" value="' + joinedValues_week + '" />' +
                '<input type="hidden" name="' + price_length + 'exception_date" value="' + joinedValues_date + '" />' +
                '<input type="hidden" name="' + price_length + 'exception_buy" value="' + joinedValues_buy + '" />' +
                '<input type="hidden" name="' + price_length + 'exception_sell" value="' + joinedValues_sell + '" />' +
                "</div>"
            )

            $("#new_price_modal").modal('hide');
        });


        $(document).on("click", "#add_priace", function() {
            $('.js-example-basic-single').select2('destroy');
            $('.price_copy:first').clone().insertAfter(".price_copy:last")

            $('.price_copy:last').children('.delete_place').html(
                '<i class="fas fa-times text-red-200 clickable-item-pointer price_cost"></i>');

            $('.js-example-basic-single').select2();

        });

        $(document).on("click", ".delete_price", function() {
            $(this).parent().parent().parent().remove();
        });

    });
</script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote.min.js" integrity="sha512-6rE6Bx6fCBpRXG/FWpQmvguMWDLWMQjPycXMr35Zx/HRD9nwySZswkkLksgyQcvrpYMx0FELLJVBvWFtubZhDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $('.description').summernote({
        placeholder: 'Enter Description',
        tabsize: 2,
        height: 100,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ]
    });
</script>

<!-- select 2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js" integrity="sha512-4MvcHwcbqXKUHB6Lx3Zb5CEAVoE9u84qN+ZSMM6s7z8IeJriExrV3ND5zRze9mxNlABJ6k864P/Vl8m0Sd3DtQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function() {
        $('.js-example-basic-single').select2();
        //hide search
        $('.select2-no-search').select2({
            minimumResultsForSearch: -1
        });
    });

    fetchCity();

    //for country and cities ajax inputs
    function fetchCity(countryID = $('select[name="country_id"]').val()) {

        var url = "{{ route('sett.createcityajax', ':id') }}";
        url = url.replace(':id', countryID);

        if (countryID) {
            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $('select[name="city_id"]').empty();
                    $.each(data, function(key, value) {
                        $('select[name="city_id"]').append('<option value="' +
                            value.id + '">' + value.name + '</option>');
                    });
                    fetchRegion();
                }
            });
        } else {
            $('select[name="city_id"]').empty();
        }
    }

    $('select[name="country_id"]').on('change', function(e) {
        var country_id = $(this).val();
        fetchCity(country_id)
    });
</script>




@endsection