@php
    $countries = \App\Models\Country::get();
    $country_global = \App\Models\Country::where('prefix', session('country'))->first();
    $governorates = \App\Models\Governorate::getByCountry($country_global->id)->get();
    $regions = \App\Models\Region::get();
@endphp

@extends('front.front_layouts.main')

@section('content')

    {{--@include('front.front_component.sale_category_slider')--}}

    <section class="top-section sales-add">
        <div class="container">
            @include('front.front_component.alert')
            <form class="form" id="add_sale" action="{{route('front.sale_add')}}" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-6 col-lg-3">
                        <div class="img-upload rounded-0">
                            <img src="{{ asset('front_asset/assets/images/upload.png') }}" class="rounded-0" id="output">
                            <input type="file" name="main_image" class="uploader" onchange="loadFile(event, 'output')">
                        </div>
                        <span class="upload-span">أضف صورة الشروة الرئيسية</span>
                    </div>
                    <div class="col-md-6 col-lg-6 offset-lg-3">
                        <div class="img-upload rounded-0 ml-2">
                            <img src="{{ asset('front_asset/assets/images/upload.png') }}" class="rounded-0" id="output1">
                            <input type="file" name="sub_image1" class="uploader" onchange="loadFile(event, 'output1')">
                        </div>
                        <div class="img-upload rounded-0 ml-2">
                            <img src="{{ asset('front_asset/assets/images/upload.png') }}" class="rounded-0" id="output2">
                            <input type="file" name="sub_image2" class="uploader" onchange="loadFile(event, 'output2')">
                        </div>
                        <div class="img-upload rounded-0 ml-2">
                            <img src="{{ asset('front_asset/assets/images/upload.png') }}" class="rounded-0" id="output3">
                            <input type="file" name="sub_image3" class="uploader" onchange="loadFile(event, 'output3')">
                        </div>
                        <span class="upload-span">أضف صور اخرى </span>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <label>إسم الشروة <span>*</span></label>
                        <input type="text" name="name" class="form-control mb-0" placeholder="أدخل إسم الشروة">

                    </div>
                    <div class="col-md-6 col-lg-3">
                        <label>تصنيف الشروة <span>*</span></label>
                        <select type="text" name="supplier_category_id" class="form-control mb-0">
                            <option selected disabled>إختر تصنيف الشروة</option>
                            @foreach($sale_categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <label>عدد القطع <span>*</span></label>
                        <input type="text" name="count" class="form-control mb-0" placeholder="عدد القطع">
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <label>سعر الشروة <span>*</span></label>
                        <input type="text" name="price" class="form-control mb-0" placeholder="أدخل سعر الشروة">
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <label>أدخل عملة السعر <span>*</span></label>
                        <select type="text" name="currency_country_id" class="form-control mb-0">
                            <option selected disabled>إختر عملة السعر</option>
                                <option value="دينار">دينار</option>
                                <option value="دولار">دولار</option>
                                <option value="شيكل">شيكل</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label>تفاصيل الشروة <span>*</span></label>
                        <textarea name="description" class="form-control mb-0 h-auto" rows="5" placeholder="تفاصيل الشروة"></textarea>
                    </div>
                    <div class="col-12">
                        <h3 class="subtitle py-1 h-auto">بيانات المعلن</h3>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <label>إسم المعلن <span>*</span></label>
                        <input type="text" name="author" class="form-control mb-0" placeholder="إسم المعلن">
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <label>رقم الهاتف <span>*</span></label>
                        <input type="text" name="phone" class="form-control mb-0"    placeholder="رقم الهاتف">
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <label>رقم الموبايل <span>*</span></label>
                        <input type="text" name="mobile" class="form-control mb-0" placeholder="رقم الموبايل">
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <label>رقم واتس آب <span>*</span></label>
                        <input type="text" name="whatsapp" class="form-control mb-0" placeholder="رقم واتس آب">
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <label>البريد الإلكتروني (اختياري) <span></span></label>
                        <input type="email" name="email" class="form-control mb-0" placeholder=" البريد الإلكتروني (اختياري)">
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <label>المحافظة <span>*</span></label>
                        <select type="text" name="governorate_id" id="governorate_id" class="form-control mb-0">
                            <option selected disabled>إختر المحافظة</option>
                            @foreach($governorates as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6 col-lg-3">
                        <label>المنطقة <span>*</span></label>
                        <select type="text" name="region_id" id="region_id" class="form-control mb-0">
                            <option selected disabled>إختر المنطقة</option>
                            {{--@foreach($regions as $item)--}}
                                {{--<option value="{{ $item->id }}">{{ $item->name }}</option>--}}
                            {{--@endforeach--}}
                        </select>
                    </div>
                    <div class="col-md-6"></div>
                    <div class="col-md-6">
                        {{--<label>أدخل العنوان التفصيلي <span>*</span></label>--}}
                        {{--<input type="text" name="address" class="form-control mb-0" placeholder="أدخل العنوان التفصيلي">--}}
                    </div>
                    <div class="col-md-6"></div>
                    <div class="col-md-6 col-lg-3 ">
                        <button class="btn main-btn rounded-0 hvr-shadow">إضافة</button>
                    </div>
                    <div class="col-md-6 col-lg-3 text-center align-self-center">
                        <a href="{{ route('front.sale') }}" class="return">أو رجوع</a>
                    </div>
                </div>
            </form>
        </div>
    </section>

@push('script')
    <script>

        $('#governorate_id').on('change', function (event){
            event.preventDefault();
            var main =  $('#region_id');
            var formData = {
                'id': $(this).val()
            };
            $.ajax({
                url: '{!! route('front.getRegion')!!}',
                type: 'Get',
                data: formData
            }).done(function (data) {
                if(data.stutas){
                    main.empty();
                    main.append('<option selected disabled">إختر المنطقة</option>');
                    $.each(data.regions, function( index, value ) {
                        main.append('<option value="' + value['id'] + '">' + value['name'] + '</option>');
                    });
                }
            });
        });


        $('#add_sale').on('submit', function (event) {
            event.preventDefault();
            $('#add_sale .main-btn').attr('disabled', true);
            $('#add_sale .main-btn').html('<i class="fa fa-spinner fa-spin ml-2"></i>جاري الإضافة');
            $.ajax({
                url: '{!! route('front.sale_store')!!}',
                type: 'POST',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false
            }).done(function (data) {
                $('.input-error').removeClass('input-error');
                $('.error-field').remove();
                $('#add_sale').trigger('reset');
                $('#add_sale .main-btn').attr('disabled', false);
                $('#add_sale .main-btn').html('إضافة');
                $('.alert-success').html(data.message);
                $('.alert-success').css('display', 'block');
                $('html, body').animate({
                    scrollTop: $('.alert-success').offset().top
                }, 500);

            }).fail(function (data) {
                $('.input-error').removeClass('input-error');
                $('.error-field').remove();
                $.each(data.responseJSON.errors, function (index, value) {
                    $("#add_sale input[name='" + index + "']").parent().append('<small class="form-text error-field d-block">' + value + '</small>');
                    $("#add_sale input[name='" + index + "']").addClass('input-error');
                    $("#add_sale select[name='" + index + "']").parent().append('<small class="form-text error-field d-block">' + value + '</small>');
                    $("#add_sale select[name='" + index + "']").addClass('input-error');
                    $("#add_sale textarea[name='" + index + "']").parent().append('<small class="form-text error-field d-block">' + value + '</small>');
                    $("#add_sale textarea[name='" + index + "']").addClass('input-error');
                    $('#add_sale .main-btn').attr('disabled', false);
                    $('#add_sale .main-btn').html('إضافة');
                });
            });
        });
    </script>
@endpush

@stop