@extends("admin.layouts.app")
@section("css-links")

    <link rel="stylesheet" type="text/css" href="{{mix("css/dataTables.bootstrap4.min.css")}}"/>
    <link rel="stylesheet" type="text/css" href="{{mix("css/select.bootstrap4.min.css")}}"/>
    <link rel="stylesheet" type="text/css" href="{{mix("css/selectric.css")}}"/>

@endsection
@section("page-header")
    <div class="section-header">
        <h1>Categories</h1>
        <div class="section-header-breadcrumb">
            <div class="breadcrumb-item active"><a href="#">Admin</a></div>
            <div class="breadcrumb-item"><a href="{{route("admin.category.index")}}">Categories</a></div>
            <div class="breadcrumb-item">{{$category->category_names["en"]}} ({{$category->category_names["ar"]}})</div>
            <div class="breadcrumb-item">Properties</div>

        </div>
    </div>
@endsection

@section("content")
    @include("admin.includes.page-message")
    <div class="section-body">
        <h2 class="section-title">Properties</h2>

        <div class="row">
        <div class="col-lg-12">
            <div class="card card-primary" style="margin-bottom: 0">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <h4>{{$category->category_names["en"]}} </h4>
                        </div>
                        <div class="col-lg-6 dir-rtl text-right">
                            <h4>{{$category->category_names["ar"]}} </h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

        @if(hasPermissions("create-property"))
        <div class="mt-3 mb-3">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary rounded-circle" data-toggle="modal" data-target="#exampleModal">
                <i class="fas fa-plus"></i>
            </button>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Create New Property</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="selections" >
                        <div class="row">
                            <div class="col-lg-3 mb-2 selection-action" data-type="SD">
                                <div class="selection-item">
                                    <div class="img-box">
                                        <img src="{{asset("assets/img/sd.png")}}" alt="..." >
                                    </div>
                                    <h3>Slider</h3>
                                </div>
                            </div>
                            <div class="col-lg-3 mb-2 selection-action" data-type="SL">
                                <div class="selection-item">
                                    <div class="img-box">
                                        <img src="{{asset("assets/img/sl.png")}}" alt="..." >
                                    </div>
                                    <h3>Buttons Selection</h3>
                                </div>
                            </div>
                            <div class="col-lg-3 mb-2 selection-action" data-type="DP">
                                <div class="selection-item">
                                    <div class="img-box">
                                        <img src="{{asset("assets/img/dp.png")}}" alt="..." >
                                    </div>
                                    <h3>Drop Down Selection</h3>
                                </div>
                            </div>
                            <div class="col-lg-3 mb-2 selection-action" data-type="SW">
                                <div class="selection-item">
                                    <div class="img-box">
                                        <img src="{{asset("assets/img/sw.png")}}" alt="..." >
                                    </div>
                                    <h3>Switch</h3>
                                </div>
                            </div>
                            <div class="col-lg-3 mb-2 selection-action" data-type="TF">
                                <div class="selection-item">
                                    <div class="img-box">
                                        <img src="{{asset("assets/img/tf.png")}}" alt="..." >
                                    </div>
                                    <h3>Text Field</h3>
                                </div>
                            </div>
                            <div class="col-lg-3 mb-2 selection-action" data-type="TA">
                                <div class="selection-item">
                                    <div class="img-box">
                                        <img src="{{asset("assets/img/ta.png")}}" alt="..." >
                                    </div>
                                    <h3>Text Area</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body" id="selection-options" >
                        <div class="revert-button-box" id="revertProperty">
                            <button class="btn btn-primary"><i class="far fa-arrow-alt-circle-left"></i> Revert</button>
                        </div>
                        <form method='post' action='{{route("admin.category.property.store", $category->id)}}' id="propertyForm" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="type" value="">
                            <div class="row">
                                <div class="col-lg-6 col-md-8">
                                    <div class="form-group">
                                        <label>Property English Title</label>
                                        <input type="text" name="property_en_title" class="form-control form-input">
                                        <div class="invalid-feedback" style="display: none"></div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-8">
                                    <div class="form-group">
                                        <label>Property Arabic Title</label>
                                        <input type="text" name="property_ar_title" class="form-control form-input">
                                        <div class="invalid-feedback" style="display: none"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 ">
                                    <div class="form-group">
                                        <label>Property Icon</label>
                                        <div id="PropertyIconBox">
                                            <button class="btn btn-primary form-control button-upload-file" >
                                                <input class="input-file show-uploaded form-input" id="PropertyIcon" type="file" name="property_icon" data-upload-type="single" data-imgs-container-class="uploaded-images">
                                                <span class="upload-file-content">
                                                    <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                                    <span class="upload-file-content-text">Upload Icon</span>
                                                </span>
                                            </button>
                                        </div>
                                        <div class="invalid-feedback" style="display: none"></div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div class="uploaded-images" style="margin-bottom: 20px;"></div>
                                </div>
                            </div>
                            <div class="form-custom-inputs-box">

                            </div>

                            <div class="text-right">
                                <span class="btn btn-primary submit-button" id="submitForm">Create</span>
                            </div>
                        </form>
                    </div>
                    <div class="model-body" id="property-loading"></div>

                </div>
            </div>
        </div>

        @endif


        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4>All Properties</h4>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped data-table" id="table-categories">
                                <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th>Is Shown In Main Box</th>
                                    <th>Type</th>
                                    <th>English Name</th>
                                    <th>Arabic Name</th>
                                    @if(hasPermissions(["edit-property", "delete-property"]))
                                    <th class="min-width-95">Control</th>
                                    @endif
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($properties as $property)
                                    <tr>
                                        <td>{{$property->id}}</td>
                                        <td>
                                            @if($property->type == "SD")
                                                <div class="toggle-flip">
                                                    <label>
                                                        <input type="checkbox"
                                                               class="changeShown"
                                                               name="showing"
                                                               data-property-id="{{$property->id}}" data-category-id="{{$property->category_id}}" data-current-value = "{{$property->sliderOptions->is_shown}}"
                                                            {{checked("is_shown", 1, $property->sliderOptions)}}><span class="flip-indecator" data-toggle-on="ON" data-toggle-off="OFF"></span>
                                                    </label>
                                                </div>
                                            @endif
                                        </td>
                                        <td>
                                            @if($property->type == "SD")
                                                Slider
                                            @elseif($property->type == "DP")
                                                Drop Down Selection
                                            @elseif($property->type == "SL")
                                                Buttons Selection
                                            @elseif($property->type == "SW")
                                                Switch
                                            @elseif($property->type == "TA")
                                                Text Area
                                            @elseif($property->type == "TF")
                                                Text Field
                                            @endif
                                        </td>
                                        <td>{{$property->title_property["en"]}}</td>
                                        <td>{{$property->title_property["ar"]}}</td>
                                        @if(hasPermissions(["edit-property", "delete-property"]))
                                        <td class="min-width-95">
                                            @if(hasPermissions("delete-property"))
                                            <!-- Delete -->
                                            <form action="{{route("admin.category.property.destroy",[$category->id, $property->id])}}" method="post" id="delete{{$property->id}}"
                                                  style="display: none" data-swal-title="Delete Property"
                                                  data-swal-text="Are Your Sure To Delete This Property ?"
                                                  data-yes="Yes" data-no="No"
                                                  data-success-msg="the property has been deleted succssfully">
                                                @csrf @method("delete") </form>
                                            <span href="#" class="btn btn-danger form-confirm" data-form-id="#delete{{$property->id}}"><i class="far fa-trash-alt"></i></span>
                                            @endif
                                            @if(hasPermissions("edit-property"))
                                                <!-- Edit -->
                                            <a href="{{route("admin.category.property.edit",[$category->id, $property->id])}}" class="btn btn-success"><i class="fas fa-edit"></i></a>
                                            @endif
                                        </td>
                                        @endif
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@section("js-scripts")
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="{{mix("js/jquery.dataTables.min.js")}}"></script>
    <script src="{{mix("js/dataTables.bootstrap4.min.js")}}"></script>
    <script src="{{mix("js/select.bootstrap4.min.js")}}"></script>
    <script src="{{mix("js/jquery.selectric.min.js")}}"></script>
    <script src="{{asset("assets/js/page/modules-datatables.js")}}"></script>

    <script>
        $(document).ready(function(){
            // Append to body before showing modal.
            $('.modal').appendTo($('body'));


            let countSliderShowing = $('input[name="showing"]:checked').length;
            if(countSliderShowing > 2){
                $('input[name="showing"]:not(:checked)').prop('disabled', true);
            }
            $(".changeShown").on("click",function (event){
                event.preventDefault();
                let input = $(this),
                    propertyId = input.data("property-id"),
                    categoryId = input.data("category-id"),
                    currentValue = input.data("current-value");
                if(countSliderShowing <= 2 || currentValue == 1){


                        $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        type: "POST",
                        url: "/admin/property/slider/change_shown",
                        data: {property_id:propertyId,showing:(currentValue == 1 ? 0 : 1), category_id:categoryId},
                        success: function (response) {
                            if(response.status_number == "200"){
                                if(currentValue == 1){
                                    countSliderShowing--;
                                    input.data("current-value", 0);
                                    input.prop("checked", false);
                                }else{
                                    input.data("current-value", 1);
                                    countSliderShowing++;
                                    input.prop("checked", true);
                                }

                                if(countSliderShowing > 2){
                                    $('input[name="showing"]:not(:checked)').prop('disabled', true);
                                }else{
                                    $('input[name="showing"]:not(:checked)').prop('disabled', false);
                                }
                            }else if(response.status_number == "407"){
                                swal("Error",
                                    "Sorry, You Cant Make This Slider Shown in Main Box , Because The Maximum Of Shown Sliders Is 3 ", "error");
                            }

                        }
                    });


                }

            });

        });
        // $("#table-categories").dataTable({
        //     "columnDefs": [
        //         { "sortable": false, "targets": [5,8] }
        //     ]
        // });


    </script>

    <script src="{{asset("assets/js/pages/property.js")}}"></script>


@endsection