@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>Properties</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 class="breadcrumb-item">{{$property->title_property["en"]}} ({{$property->title_property["ar"]}})</div>
            <div class="breadcrumb-item">Edit</div>

        </div>
    </div>
@endsection

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

        <div class="mb-4">
            <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>
        </div>



        <div class="row">
            <div class="col-12 col-md-6 col-lg-10 m-auto">
                <form action="{{route("admin.category.property.update",[$category->id,$property->id])}}" method="post" enctype="multipart/form-data">
                    @csrf
                    @method("put")
                    <div class="card">
                        <div class="card-header">
                            <h4>Edit Property</h4>
                        </div>
                        <div class="card-body">
                            <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 @if($errors->has("property_en_title"))is-invalid @endif"
                                               value="{{inputValue("property_en_title", $property, "title_property", "en")}}">
                                        @error("property_en_title")
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                        @enderror
                                    </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 @if($errors->has("property_ar_title"))is-invalid @endif"
                                               value="{{inputValue("property_ar_title", $property, "title_property", "ar")}}">
                                        @error("property_ar_title")
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 ">
                                    <div class="form-group">
                                        <label>Property Icon</label>
                                        <div>
                                            <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>
                                        @error("property_icon")
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div class="uploaded-images" style="margin-bottom: 20px;">
                                        @if(!empty($property->getFirstMediaFile()))
                                            <div class="img-container text-center">
                                                <img src="{{$property->getFirstMediaFile()->url}}" alt="" style="display: block">
                                                <span class="btn btn-danger mt-2 remove-icon"
                                                      data-swal-title="Delete Icon"
                                                      data-swal-text="Are Your Sure To Delete This Icon ?"
                                                      data-swal-no="no" data-swal-yes="yes" data-swal-success-msg="icon has been deleted successfully"
                                                      data-property-id="{{$property->id}}">Delete Icon</span>

                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            @if($property->type == "SD")
                                <h3>Options</h3>
                                <hr>
                                <div class="row">
                                    <div class="col-lg-6 col-md-8">
                                        <div class="form-group">
                                            <label>Minimum</label>

                                            <input type="text"
                                                   name="min"
                                                   class="form-control @if($errors->has("min"))is-invalid @endif"
                                                   value="{{(int)inputValue("min", $property->options, "min")}}">
                                            @error("min")
                                            <div class="invalid-feedback">
                                                {{$message}}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-8">
                                        <div class="form-group">
                                            <label>Maximum</label>
                                            <input type="text" name="max"
                                                   class="form-control @if($errors->has("max"))is-invalid @endif"
                                                   value="{{inputValue("max", $property->options, "max")}}">
                                            @error("max")
                                            <div class="invalid-feedback">
                                                {{$message}}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-8">
                                        <div class="form-group">
                                            <label>Minimum Engligh Title</label>
                                            <input type="text" name="min_en_title"
                                                   class="form-control @if($errors->has("min_en_title"))is-invalid @endif"
                                                   value="{{inputValue("min_en_title", $property->options, "min_title", "en")}}">
                                            @error("min_en_title")
                                            <div class="invalid-feedback">
                                                {{$message}}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-8">
                                        <div class="form-group">
                                            <label>Minimum Arabic Title</label>
                                            <input type="text" name="min_ar_title"
                                                   class="form-control @if($errors->has("min_ar_title"))is-invalid @endif"
                                                   value="{{inputValue("min_ar_title", $property->options, "min_title", "ar")}}">
                                            @error("min_ar_title")
                                            <div class="invalid-feedback">
                                                {{$message}}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-8">
                                        <div class="form-group">
                                            <label>Maximum English Title</label>
                                            <input type="text" name="max_en_title"
                                                   class="form-control @if($errors->has("max_en_title"))is-invalid @endif"
                                                   value="{{inputValue("max_en_title", $property->options, "max_title", "en")}}">
                                            @error("max_en_title")
                                            <div class="invalid-feedback">
                                                {{$message}}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-8">
                                        <div class="form-group">
                                            <label>Maximum Arabic Title</label>
                                            <input type="text" name="max_ar_title"
                                                   class="form-control @if($errors->has("max_ar_title"))is-invalid @endif"
                                                   value="{{inputValue("max_ar_title", $property->options, "max_title", "ar")}}">
                                            @error("max_ar_title")
                                            <div class="invalid-feedback">
                                                {{$message}}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                            @elseif($property->type == "TA" || $property->type == "TF")
                                <h3>Options</h3>
                                <hr>
                                <div class="row">
                                    <div class="col-lg-6 col-md-8">
                                        <div class="form-group">
                                            <label>Placeholder English Text</label>
                                            <input type="text" name="placeholder_en_text"
                                                   class="form-control @if($errors->has("placeholder_en_text"))is-invalid @endif"
                                                   value="{{inputValue("placeholder_en_text", $property->options, "placeholder", "en")}}">
                                            @error("property_en_title")
                                            <div class="invalid-feedback">
                                                {{$message}}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-8">
                                        <div class="form-group">
                                            <label>Placeholder Arabic Text</label>
                                            <input type="text" name="placeholder_ar_text"
                                                   class="form-control @if($errors->has("placeholder_ar_text"))is-invalid @endif"
                                                   value="{{inputValue("placeholder_ar_text", $property->options, "placeholder", "ar")}}">
                                            @error("placeholder_ar_text")
                                            <div class="invalid-feedback">
                                                {{$message}}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    @if($property->type == "TF")
                                        <div class="col-lg-6 col-md-8">
                                            <div class="form-group">
                                                <label>Field Type</label>

                                                <select class="form-control selectric form-input" name="field_type">

                                                    <option value="1"
                                                            @if(old("field_type"))
                                                                @if(old("field_type")==1)
                                                                    selected
                                                                @endif
                                                            @elseif($property->options->type == 1)
                                                                selected
                                                            @endif>Text</option>
                                                    <option value="2"
                                                            @if(old("field_type"))
                                                                @if(old("field_type")==2)
                                                                    selected
                                                                @endif
                                                            @elseif($property->options->type == 2)
                                                            selected @endif>Number</option>
                                                </select>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                            @elseif($property->type == "DP" || $property->type == "SL")
                                <h3>Options</h3>
                                <hr>
                            @php $counter = 0; @endphp
                                @foreach($property->options as $option)

                                <div class="row option">
                                    <div class="col-lg-12 text-right">
                                        <span class="btn btn-danger remove-server"
                                        data-swal-title="Delete Option"
                                        data-swal-text="Are Your Sure To Delete This Option ?"
                                        data-swal-no="no" data-swal-yes="yes" data-swal-success-msg="option has been deleted successfully"
                                        data-swal-cant-delete-msg="You Can't Delete This Option"
                                        data-option-id="{{$option->id}}" data-property-id="{{$property->id}}">
                                            <i class="fas fa-times"></i></span>
                                    </div>
                                    <div class="col-lg-6 col-md-8">
                                        <div class="form-group">
                                            <label>Option Engligh Title</label>
                                            <input type="text" name="option_en_title[]"
                                                   class="form-control @if($errors->has("option_en_title." . $counter))is-invalid @endif"
                                                   value="{{inputValue("option_en_title." . $counter, $option, "title_property", "en")}}">
                                            @error("option_en_title." . $counter)
                                            <div class="invalid-feedback">
                                                {{$message}}
                                            </div>
                                            @enderror

                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-8">
                                        <div class="form-group">
                                            <label>Option Arabic Title</label>
                                            <input type="text" name="option_ar_title[]"
                                                   class="form-control @if($errors->has("option_ar_title." . $counter))is-invalid @endif"
                                                   value="{{inputValue("option_ar_title." . $counter, $option, "title_property", "ar")}}">
                                            @error("option_en_title." . $counter)
                                            <div class="invalid-feedback">
                                                {{$message}}
                                            </div>
                                            @enderror

                                        </div>
                                    </div>
                                </div>
                                    @php $counter++; @endphp
                                @endforeach
                                @if(isset($options_count))
                                    @for($i = $counter; $i < $options_count; $i++)
                                        <div class="row option">
                                            <div class="col-lg-12 text-right">
                                                <span class="btn btn-danger remove"><i class="fas fa-times"></i></span>
                                            </div>
                                            <div class="col-lg-6 col-md-8">
                                                <div class="form-group">
                                                    <label>Option Engligh Title</label>
                                                    <input type="text" name="option_en_title[]"
                                                           class="form-control @if($errors->has("option_en_title." . $i))is-invalid @endif"
                                                           value="{{inputValue("option_en_title." . $i)}}">
                                                    @error("option_en_title." . $i)
                                                    <div class="invalid-feedback">
                                                        {{$message}}
                                                    </div>
                                                    @enderror

                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-md-8">
                                                <div class="form-group">
                                                    <label>Option Arabic Title</label>
                                                    <input type="text" name="option_ar_title[]"
                                                           class="form-control @if($errors->has("option_ar_title." . $i))is-invalid @endif"
                                                           value="{{inputValue("option_ar_title." . $i, $option)}}">
                                                    @error("option_en_title." . $i)
                                                    <div class="invalid-feedback">
                                                        {{$message}}
                                                    </div>
                                                    @enderror

                                                </div>
                                            </div>
                                        </div>
                                    @endfor
                                @endif
                                <div class="text-left">
                                    <span class="btn btn-primary add-option">Add Option</span>
                                </div>
                            @endif
                        </div>
                        <div class="card-footer text-right">
                            <button class="btn btn-primary submit-button" type="submit">Save</button>
                        </div>
                    </div>
                </form>
            </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 type="text/javascript">
        $(document).on("click",".add-option",function (){
            let fields = `
       <div class="row option">
            <div class="col-lg-12 text-right">
                <button class="btn btn-danger remove"><i class="fas fa-times"></i></button>
            </div>
            <div class="col-lg-6 col-md-8">
                <div class="form-group">
                    <label>Option Engligh Title</label>
                    <input type="text" name="option_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>Option Arabic Title</label>
                    <input type="text" name="option_ar_title[]" class="form-control form-input">
                    <div class="invalid-feedback" style="display: none"></div>
                </div>
            </div>
        </div>`;
            $(this).parent().prev().after(fields);
        });
        $(document).on("click",".option .remove", function (){
           $(this).parents(".option").remove();
        });

        $(".remove-server").on("click",function (){
            event.preventDefault();

            let title = $(this).data("swal-title"),
                text = $(this).data("swal-text"),
                optionId = $(this).data("option-id"),
                propertyId = $(this).data("property-id"),
                button = $(this);

            swal({
                title: title,
                text: text,
                icon: "warning",
                buttons: [$(this).data("swal-no"),$(this).data("swal-yes")],
                dangerMode: true,
            })
                .then((willDelete) => {
                    if (willDelete) {

                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                        $.ajax({
                            type: "POST",
                            url: "/admin/selection/option/delete",
                            data: {"option_id":optionId, "property_id":propertyId},

                            success: function( response ) {

                                if(response.status == true){
                                    console.log($(this).data("swal-success-msg"));
                                    swal(button.data("swal-success-msg"), {
                                        icon: "success",
                                    });
                                    button.parents(".option").remove();
                                }else{
                                    if(response.status_number == 405){
                                        swal(button.data("swal-cant-delete-msg"), {
                                            icon: "error",
                                        });
                                    }
                                }
                            }
                        });
                    } else {

                    }
                });
        });




        $(".remove-icon").on("click",function (){
            event.preventDefault();

            let propertyId = $(this).data("property-id"),
                title = $(this).data("swal-title"),
                text = $(this).data("swal-text"),
                button = $(this);

            swal({
                title: title,
                text: text,
                icon: "warning",
                buttons: [$(this).data("swal-no"),$(this).data("swal-yes")],
                dangerMode: true,
            })
                .then((willDelete) => {
                    if (willDelete) {

                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
                        $.ajax({
                            type: "POST",
                            url: "/admin/property/icon/delete",
                            data: {"property_id":propertyId},

                            success: function( response ) {

                                if(response.status == true){
                                    console.log($(this).data("swal-success-msg"));
                                    swal(button.data("swal-success-msg"), {
                                        icon: "success",
                                    });
                                    $(".img-container").empty();
                                }
                            }
                        });
                    } else {

                    }
                });
        });
    </script>





@endsection