@extends('layouts.master')
@section('title') {{__("admin.providers")}} @endsection
@section('css')
<!--Internal  Datetimepicker-slider css -->
<link href="{{URL::asset('assets/plugins/amazeui-datetimepicker/css/amazeui.datetimepicker.css')}}" rel="stylesheet">
<link href="{{URL::asset('assets/plugins/jquery-simple-datetimepicker/jquery.simple-dtpicker.css')}}" rel="stylesheet">
<link href="{{URL::asset('assets/plugins/pickerjs/picker.min.css')}}" rel="stylesheet">
<!-- Internal Spectrum-colorpicker css -->
<link href="{{URL::asset('assets/plugins/spectrum-colorpicker/spectrum.css')}}" rel="stylesheet">
<style>
    .provider-slider {
        position: relative;
        cursor: pointer;
    }
    .provider-slider button {
        all: unset;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 75px;
        display: flex;
        align-content: center;
        justify-content: center;
        flex-wrap: wrap;
        color: #ff3c00;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
    }
    .provider-slider:hover button {
        opacity: 1;
    }
</style>
@endsection

@section('content')
@component('components.breadcrumb')
@slot('li_1')
<a class="btn bg-primary text-white btn-sm ml-2" title="{{__("admin.back")}}" href="{{route('admin.providers.index')}}">
    <i class="fas fa-arrow-left"></i>
</a>
@endslot
@slot('title') {{__("admin.providers")}} @endslot
@endcomponent

@foreach($provider->sliders as $slider)
    <form id="delete-provider-image-form-{{$slider->id}}" action="{{route("admin.providers.deleteProviderImage")}}" method="POST">
        @csrf
        @method("DELETE")
        <input type="hidden" name="image_id" value="{{$slider->id}}">
    </form>
@endforeach

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title m-0">{{__("admin.edit_provider")}}</h4>
            </div>
            <div class="card-body">
                <form class="needs-validation" action="{{route('admin.providers.update')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    @include("layouts.session")
                    @component('components.errors')
                        @slot('id') provider_id @endslot
                    @endcomponent
                    <input type="hidden" name="provider_id" value="{{$provider->id}}">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="image">{{__("admin.image")}}</label>
                                <div>
                                    <img src="{{$provider->image}}" alt="{{__("admin.image")}}" class="img-thumbnail wd-100p wd-sm-200"/>
                                </div>
                                <input type="file" class="form-control @error('image') is-invalid @enderror" id="image" name="image">
                                @error('image')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="images">{{__("admin.images")}}</label>
                                <div class="d-flex align-items-center">
                                    @foreach($provider->sliders as $slider)
                                    <div class="provider-slider">
                                        <img src="{{$slider->image}}" alt="{{__("admin.image")}}" class="img-thumbnail wd-100p wd-sm-200"/>
                                        <button form="delete-provider-image-form-{{$slider->id}}"><i class="fe fe-x-circle"></i></button>
                                    </div>
                                    @endforeach
                                </div>
                                <input type="file" class="form-control @error('images') is-invalid @enderror" id="images" name="images[]" multiple>
                                @error('images')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="name">{{__("admin.name")}} <span class="text-danger fw-bolder">*</span></label>
                                <input type="text"class="form-control @error('name') is-invalid @enderror" id="name" name="name" placeholder="{{__("admin.name")}}" value="{{old('name')?old('name'):$provider->name}}" required>
                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="email">{{__("admin.email")}} <span class="text-danger fw-bolder">*</span></label>
                                <input type="text"class="form-control @error('email') is-invalid @enderror" id="email" name="email" placeholder="{{__("admin.email")}}" value="{{old('email')?old('email'):$provider->email}}" required>
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="phone">{{__("admin.phone")}} <span class="text-danger fw-bolder">*</span></label>
                                <input type="text"class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone" placeholder="{{__("admin.phone")}}" value="{{old('phone')?old('phone'):$provider->phone}}" required>
                                @error('phone')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="link">{{__("admin.link")}}</label>
                                <input type="text"class="form-control @error('link') is-invalid @enderror" id="link" name="link" placeholder="{{__("admin.link")}}" value="{{old('link')?old('link'):$provider->link}}">
                                @error('link')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="management_ratio">{{__("admin.management_ratio")}} <span class="text-danger fw-bolder">*</span></label>
                                <input type="number"class="form-control @error('management_ratio') is-invalid @enderror" id="management_ratio" name="management_ratio" placeholder="{{__("admin.management_ratio")}}" value="{{old('management_ratio')?old('management_ratio'):$provider->management_ratio}}" required>
                                @error('management_ratio')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="password">{{__("admin.password")}}</label>
                                <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" placeholder="{{__("admin.password")}}" value="{{old('password')}}">
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="city_id">{{__("admin.cities")}}  <span class="text-danger fw-bolder">*</span></label>
                                <select name="city_id" class="form-control @error('city_id') is-invalid @enderror" id="city_id" required>
                                    <option value="" selected disabled>{{__("admin.choose_city")}}</option>
                                    @foreach($cities as $city)
                                    <option value="{{$city->id}}" @selected($provider->city_id == $city->id)>{{$city->name}}</option>
                                    @endforeach
                                </select>
                                @error('city_id')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="category_id">{{__("admin.categories")}} <span class="text-danger fw-bolder">*</span></label>
                                <select class="form-control form-select @error('category_id') is-invalid @enderror" id="category_id" name="category_id" onchange="getSubCategories()" required>
                                    <option value="" selected disabled>{{__("admin.choose_category")}}</option>
                                    @foreach($categories as $category)
                                        <option value="{{$category->id}}" @selected($provider->category_id == $category->id)>{{$category->name}}</option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label" for="sub_category_id">{{__("admin.sub_categories")}} <span class="text-danger fw-bolder">*</span></label>
                                <select class="form-control form-select @error('sub_category_id') is-invalid @enderror" id="sub_category_id" name="sub_category_id" required>
                                    <option value="" selected disabled>{{__("admin.choose_sub_category")}}</option>
                                </select>
                                @error('sub_category_id')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary mt-4" type="submit">{{__("admin.edit_provider")}}</button>
                </form>
            </div>
        </div>
        <!-- end card -->
    </div> <!-- end col -->
</div>
@endsection
@section('js')
<!--Internal  Datepicker js -->
<script src="{{URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js')}}"></script>
<!--Internal  jquery.maskedinput js -->
<script src="{{URL::asset('assets/plugins/jquery.maskedinput/jquery.maskedinput.js')}}"></script>
<!--Internal  spectrum-colorpicker js -->
<script src="{{URL::asset('assets/plugins/spectrum-colorpicker/spectrum.js')}}"></script>
<!-- Internal Select2.min js -->
<script src="{{URL::asset('assets/plugins/select2/js/select2.min.js')}}"></script>
<!--Internal Ion.rangeSlider.min js -->
<script src="{{URL::asset('assets/plugins/ion-rangeslider/js/ion.rangeSlider.min.js')}}"></script>
<!--Internal  jquery-simple-datetimepicker js -->
<script src="{{URL::asset('assets/plugins/amazeui-datetimepicker/js/amazeui.datetimepicker.min.js')}}"></script>
<!-- Ionicons js -->
<script src="{{URL::asset('assets/plugins/jquery-simple-datetimepicker/jquery.simple-dtpicker.js')}}"></script>
<!--Internal  pickerjs js -->
<script src="{{URL::asset('assets/plugins/pickerjs/picker.min.js')}}"></script>
<!-- Internal form-elements js -->
<script src="{{URL::asset('assets/js/form-elements.js')}}"></script>
<script>
    var categorySelector = document.getElementById("category_id");
    var subCategorySelector = document.getElementById("sub_category_id");

    function getSubCategories() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            }
        })

        if(categorySelector.value) {
            $.get("{{env("APP_URL") . "/api/getSubCategories/"}}" + categorySelector.value, {})
            .done(function(response, status) {
                if(status) {
                    subCategorySelector.innerHTML = `<option value="" selected disabled>{{__("admin.choose_sub_category")}}</option>`;
                    let length = response.data.length;
                    for(let i = 0; i < length; i++) {
                        let selected = (response.data[i].id == {{$provider->sub_category_id}})?"selected":"";
                        subCategorySelector.innerHTML += `
                            <option value="` + response.data[i].id + `" ` + selected + `>` + response.data[i].name + `</option>
                        `;
                    }
                }
            });
        }
    }

    window.addEventListener("load", getSubCategories);
</script>
@endsection