@extends('admin.layouts.admin')
@section('content')
<style>
    .img-bg {
        padding-bottom: 310px;
    }
</style>
<section class="pc-container">
    <div class="pc-content">
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.staff') }}">Staff</a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">Staff</li>
                        </ul>
                    </div>
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h3 class="mb-0">Staff</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if($action == 'Edit')
        <form class="" role="form" id="edit_form" action="{{ route('admin.staff.update',$record->id) }}" method="post" enctype="multipart/form-data">

            @else
            <form class="" method="POST" id="add_form" action="{{ route('admin.staff.store') }}" enctype="multipart/form-data">
                @endif
                @csrf
                <div class="row pt-0">
                    <div class="col-md-12">
                        @if(isset($record->id))
                        @php $id=$record->id @endphp
                        @else
                        @php $id=0; @endphp
                        @endif
                        <div class="card">
                            <div class="card-header">
                                <h5>{{ $title }}</h5>
                            </div>
                            <div class="card-body pt-2">
                                <div class="row">
                                    @if(isset($record->image))
                                    @php $image=$record->image @endphp
                                    @php $imageUrl=asset(Storage::url('staff/'.$record->image)) @endphp
                                    @elseif(old('image'))
                                    @php $image=old('image'); @endphp
                                    $imageUrl=""
                                    @else
                                    @php $image='';
                                    $imageUrl="" @endphp
                                    @endif

                                    <div class="col-lg-3 col-md-5">
                                        <input type="hidden" class="form-control old_image" id="old_image" name="old_image" value="{{$image}}">
                                        <div class="upload__box">
                                            <div class="upload__img-wrap" style="height: 312px;">
                                                <div class='upload__img-box'>
                                                    <div style='background-image: url("{{$imageUrl}}");' data-number="{{$id}}" data-file='{{$image}}' class='img-bg'>
                                                        <div class='upload__img-close' data-id="{{$id}}" data-type="I"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="upload__btn-box mt-3">
                                                <label class="upload__btn">
                                                    Upload file
                                                    <input type="file" name="image" data-max_length="1" value="" class="form-control upload__inputfile" accept="image/jpeg, image/jpg, image/png, application/pdf">
                                                </label>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="col-lg-9 col-md-7">
                                        <div class="row">


                                            <div class="col-md-4 col-sm-6 col-12 form-group">
                                                @if(isset($record->first_name))
                                                @php $first_name=$record->first_name @endphp
                                                @elseif(old('first_name'))
                                                @php $first_name=old('first_name'); @endphp
                                                @else
                                                @php $first_name=''; @endphp
                                                @endif

                                                <label class="form-label">First Name <span class="text-danger">*</span></label>
                                                <input required name="first_name" type="text" class="form-control" placeholder="First Name" value="{{ $first_name }}">
                                            </div>

                                            <div class="col-md-4 col-sm-6 col-12 form-group">
                                                @if(isset($record->last_name))
                                                @php $last_name=$record->last_name @endphp
                                                @elseif(old('last_name'))
                                                @php $last_name=old('last_name'); @endphp
                                                @else
                                                @php $last_name=''; @endphp
                                                @endif

                                                <label class="form-label">Last Name </label>
                                                <input name="last_name" type="text" class="form-control" placeholder="Last Name" value="{{ $last_name }}">
                                            </div>

                                            <div class="col-md-4 col-sm-6 col-12 form-group">
                                                @if(isset($record->email))
                                                @php $email=$record->email @endphp
                                                @elseif(old('email'))
                                                @php $email=old('email'); @endphp
                                                @else
                                                @php $email=''; @endphp
                                                @endif

                                                <label class="form-label">Email <span class="text-danger">*</span></label>
                                                <input required name="email" type="email" class="form-control" placeholder="Email" value="{{ $email }}">
                                            </div>

                                            <div class="col-md-4 col-sm-6 col-12 form-group">
                                                @if(isset($record->phone))
                                                @php $phone=$record->phone @endphp
                                                @elseif(old('phone'))
                                                @php $phone=old('phone'); @endphp
                                                @else
                                                @php $phone=''; @endphp
                                                @endif

                                                <label class="form-label">Phone <span class="text-danger">*</span></label>
                                                <input required name="phone" type="text" class="form-control" placeholder="Phone" value="{{ $phone }}">
                                            </div>

                                            <div class="col-md-4 col-sm-6 col-12 form-group">
                                                @if(isset($record->zipcode))
                                                @php $zipcode=$record->zipcode @endphp
                                                @elseif(old('zipcode'))
                                                @php $zipcode=old('zipcode'); @endphp
                                                @else
                                                @php $zipcode=''; @endphp
                                                @endif

                                                <label class="form-label">Zipcode <span class="text-danger">*</span></label>
                                                <input name="zipcode" type="text" class="form-control" placeholder="Zipcode" value="{{ $zipcode }}">
                                            </div>


                                            <div class="col-md-4 col-sm-6 col-12 form-group">
                                                @if(isset($record->address))
                                                @php $address=$record->address @endphp
                                                @elseif(old('address'))
                                                @php $address=old('address'); @endphp
                                                @else
                                                @php $address=''; @endphp
                                                @endif
                                                <label class="form-label">Address </label>
                                                <textarea name="address" class="form-control" placeholder="Address">{!! $address !!}</textarea>
                                            </div>

                                            <div class="col-md-4 col-sm-6 col-12 form-group">
                                                @if(isset($record->country_id))
                                                @php $country_id=$record->country_id @endphp
                                                @elseif(old('country_id'))
                                                @php $country_id=old('country_id'); @endphp
                                                @else
                                                @php $country_id=0; @endphp
                                                @endif
                                                <label class="form-label">Country</label>
                                                <select class="form-control" name="country_id" id="country_id">
                                                    <option value="">-- Select --</option>
                                                    @foreach($countries as $country)
                                                    <option value="{{ $country->id }}" {!! ($country_id==$country->id) ? 'selected' : '' !!}>{{ $country->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-4 col-sm-6 col-12 form-group">
                                                <label class="form-label">State</label>
                                                <select class="form-control" name="state_id" id="state_id">
                                                    <option value="">-- Select --</option>
                                                    @isset($state)
                                                    <option selected value="{{ $state->id }}">{{ $state->name }}</option>
                                                    @endisset
                                                </select>
                                            </div>

                                            <div class="col-md-4 col-sm-6 col-12 form-group">
                                                <label class="form-label">City</label>
                                                <select class="form-control" name="city_id" id="city_id">
                                                    <option value="">-- Select --</option>
                                                    @isset($city)
                                                    <option selected value="{{ $city->id }}">{{ $city->name }}</option>
                                                    @endisset
                                                </select>
                                            </div>
                                            <!-- <div class="col-md-12 col-sm-12 col-12 form-group mt-2 mb-4">
                                                <label class="form-label">Working Days</label><br />
                                               
                                                @if(isset($record->working_days))
                                                @php $day_ids=$record->working_days->pluck('day_id')->toArray() @endphp
                                                @elseif(old('days'))
                                                @php $day_ids=old('days'); @endphp
                                                @else
                                                @php $day_ids=[]; @endphp
                                                @endif
                                                @foreach($days as $day)
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="inlineCheckbox{{ $day->id }}" name="days[]" value="{{ $day->id }}" {!! in_array($day->id,$day_ids) ? 'checked' : '' !!}>
                                                    <label class="form-check-label" for="inlineCheckbox{{ $day->id }}"> {{ $day->day }}</label>
                                                </div>
                                                @endforeach
                                            </div> -->

                                            <div class="col-md-12 col-sm-12 col-12 form-group mt-2 mb-4">
                                                <label class="form-label">Services</label><br />
                                                @if(isset($record->services))
                                                @php $service_ids=$record->services->pluck('service_id')->toArray() @endphp
                                                @elseif(old('services'))
                                                @php $service_ids=old('services'); @endphp
                                                @else
                                                @php $service_ids=[]; @endphp
                                                @endif
                                                @foreach($services as $service)
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" id="inlineCheckbox{{ $service->id }}" name="services[]" value="{{ $service->id }}" {!! in_array($service->id,$service_ids) ? 'checked' : '' !!}>
                                                    <label class="form-check-label" for="inlineCheckbox{{ $service->id }}"> {{ $service->name }}</label>
                                                </div>
                                                @endforeach
                                            </div>

                                            <div class="col-md-4 col-sm-6 col-12" data-bs-toggle="tooltip">
                                                @if(isset($record->active))
                                                @php $active=$record->active @endphp
                                                @elseif(old('active'))
                                                @php $active=old('active'); @endphp
                                                @else
                                                @php $active=1; @endphp
                                                @endif
                                                <div class="form-check form-switch custom-switch-v1 mt-4 pt-3">
                                                    <input name="active" type="checkbox" class="form-check-input input-primary" id="activeCheckbox" value='1' {!! ($active==1) ? 'checked' : '' !!}>
                                                    <label class="form-check-label" for="activeCheckbox">Active</label>
                                                </div>
                                            </div>
                                            <!-- </div> -->
                                            <!-- </div> -->
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="row my-5">
                            <div class="col-6">
                                <button class="btn btn-primary" type="submit">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>

            </form>
</section>
@endsection
@push('scripts')
<script>
    $(document).ready(function() {

        var imgWrap = "";
        var imgArray = [];

        $(document).on('change', '.upload__inputfile', function(e) {

            if ($(this).attr('data-id') == 'video_file') {

                $(this).closest('.upload__box').find('video source').attr('src', URL.createObjectURL(this.files[0]))
                $(this).closest('.upload__box').find('video')[0].load()

            } else {

                imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap');
                var maxLength = $(this).attr('data-max_length');

                var files = e.target.files;
                var filesArr = Array.prototype.slice.call(files);
                var iterator = 0;

                console.log('filesArr ' + filesArr);
                filesArr.forEach(function(f, index) {

                    var len = 0;
                    for (var i = 0; i < imgArray.length; i++) {
                        if (imgArray[i] !== undefined) {
                            len++;
                        }
                    }
                    if (len > maxLength) {
                        return false;
                    } else {
                        imgArray.push(f);

                        var reader = new FileReader();
                        reader.onload = function(e) {
                            console.log(f.type);
                            if (f.type == 'application/pdf') {
                                var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg' ><div class='upload__img-close' data-type='I'></div><img  src='https://cdn-icons-png.flaticon.com/128/337/337946.png'></div></div>";

                            } else {
                                var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg'><div class='upload__img-close' data-type='I'></div></div></div>";

                            }
                            // imgWrap.append(html);
                            imgWrap.html(html);
                            iterator++;
                        }
                        reader.readAsDataURL(f);
                    }
                    // }
                });
                // });
            }
        });

        $('body').on('click', ".upload__img-close", function(e) {
            if (confirm('Are you sure you want to delete ?')) {
                var file = $(this).parent().data("file");
                var id = $(this).attr('data-id');
                var file_type = $(this).attr('data-type');
                that = this;
                // For some browsers, `attr` is undefined; for others,
                // `attr` is false.  Check for both.
                if (typeof id !== 'undefined' && id !== false) {
                    $.ajax({
                        url: "{{ route('admin.staff.removeFile') }}",
                        type: 'POST',
                        data: {
                            // _method: 'DELETE',
                            id: id,
                            type: file_type
                        },
                        success: function(res) {
                            if (res.status == true) {

                            }
                        }
                    });
                }
                for (var i = 0; i < imgArray.length; i++) {
                    if (imgArray[i].name === file) {
                        imgArray.splice(i, 1);
                        break;
                    }
                }
                $(this).parentsUntil('.row').find('.old_image').val('');
                console.log($(this).parentsUntil('.row').find('.old_image').val());
                $(this).parent().parent().remove();
                $(this).parent().children().remove();
            }
        });


        // select countries
        $("#country_id").select2({
            ajax: {
                url: "{{ route('getCountries') }}",
                type: "get",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        searchTerm: params.term // search term

                    };
                },
                processResults: function(response) {
                    return {
                        results: response

                    };
                },
                cache: true
            }
        });

        // select states
        $("#state_id").select2({
            ajax: {
                url: "{{ route('getStates') }}",
                type: "get",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    country_id = $("#country_id").val();
                    return {
                        searchTerm: params.term, // search term
                        country_id: country_id
                    };
                },
                processResults: function(response) {
                    return {
                        results: response

                    };
                },
                cache: true
            }
        });

        // select cities
        $("#city_id").select2({
            ajax: {
                url: "{{ route('getCities') }}",
                type: "get",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    state_id = $("#state_id").val();
                    return {
                        searchTerm: params.term, // search term
                        state_id: state_id
                    };
                },
                processResults: function(response) {
                    return {
                        results: response

                    };
                },
                cache: true
            }
        });
    });
</script>
@endpush