@extends('admin.layouts.admin')
@section('content')
<style>
    .img-bg {
        padding-bottom: 310px;
    }

    .removeSelectedStaff {
        color: red;
        color: #dc2626;
        font-size: 20px;
        padding-top: 12px;
    }

    .selectedStaff .row .label {
        text-transform: capitalize;
        font-size: 16px;
        border: 1px solid #ccc;
        padding: 10px;
    }

    .dayoff-checkbox {
        border: 1px solid #bec8d0;
        margin: auto;
        padding: 11px;
        margin-top: 0;
        border-radius: 8px;
    }

    .dayoff-checkbox .input-success {
        width: 1.5em;
        height: 1.5em;
    }
</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.appointment.services') }}">Appointment Services</a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">{{ $title }}</li>
                        </ul>
                    </div>
                    <!-- <div class="col-md-12">
                        <div class="page-header-title">
                            <h3 class="mb-0">{{ $title }}</h3>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>

        <div class="row pt-0">
            @if ($message = Session::get('success'))
            <div class="col-sm-12">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ $message }}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
            @endif

            <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 border-0 pb-2">
                        <!-- <h5>{{ $title }}</h5> -->

                        <ul class="nav nav-tabs " id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active text-uppercase" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Service Detail</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" {!! ($action=='Edit' ) ? '' : 'disabled' !!}>Staff</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" {!! ($action=='Edit' ) ? '' : 'disabled' !!}>Time Sheet</a>
                            </li>
                        </ul>
                    </div>

                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <div class="card-body pt-2">
                                @if($action == 'Edit')
                                <form class="" role="form" id="edit_form" action="{{ route('admin.appointment.services.update',$record->id) }}" method="post" enctype="multipart/form-data">

                                    @else
                                    <form class="" method="POST" id="add_form" action="{{ route('admin.appointment.services.store') }}" enctype="multipart/form-data">
                                        @endif
                                        @csrf

                                        <div class="row">
                                            @if(isset($record->image))
                                            @php $image=$record->image @endphp
                                            @php $imageUrl=asset(Storage::url('services/'.$record->image)) @endphp
                                            @elseif(old('image'))
                                            @php $image=old('image'); @endphp
                                            $imageUrl=""
                                            @else
                                            @php $image='';
                                            $imageUrl="" @endphp
                                            @endif

                                            <div class="col-md-4 col-sm-6 col12">
                                                <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-md-8 col-sm-6 col-12">
                                                <div class="row">
                                                    <div class="col-md-6 col-sm-6 col-12 form-group">
                                                        @if(isset($record->name))
                                                        @php $name=$record->name @endphp
                                                        @elseif(old('name'))
                                                        @php $name=old('name'); @endphp
                                                        @else
                                                        @php $name=''; @endphp
                                                        @endif

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

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


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

                                                        <label class="form-label">Price <span class="text-danger">*</span></label>
                                                        <input name="price" type="number" class="form-control" placeholder="Price" value="{{ $price }}" autofocus>
                                                    </div>

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

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

                                                    <div class="col-md-6 col-sm-6 col-12 form-group">
                                                        @if(isset($record->rank))
                                                        @php $rank=$record->rank @endphp
                                                        @elseif(old('rank'))
                                                        @php $rank=old('rank'); @endphp
                                                        @else
                                                        @php $rank=''; @endphp
                                                        @endif
                                                        <label class="form-label">Rank </label>
                                                        <input name="rank" type="number" class="form-control" placeholder="Item Rank" value="{{ $rank }}">
                                                    </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 class="row">
                                            <div class="col-12 text-end">
                                                <button class="btn btn-primary" type="submit">Submit</button>
                                            </div>
                                        </div>
                                    </form>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                            <div class="card-body pt-2">
                                @if($action == 'Edit')
                                <form class="" role="form" id="edit_form" action="{{ route('admin.appointment.services.staffUpdate',$record->id) }}" method="post" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6 col-12">
                                            <div class="row">
                                                <div class="col-12 selectedStaff">
                                                    @foreach($record->staff as $user)
                                                    <div class='row p-3'>
                                                        <div class='col-8 label'>{{ $user->first_name .' '.$user->last_name }}</div>
                                                        <div class='col-4'><input type='hidden' class="staff_ids" name='staff_id[]' value='{{ $user->id }}' />
                                                            <i class='fas fas fa-times-circle removeSelectedStaff' data-id='{{ $user->id }}'></i>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                </div>
                                                <div class="col-md-8 col-sm-8 col-12 form-group staff-select mt-3">
                                                    <label class="form-label">Staff</label>
                                                    <select class="form-control" id="staff">
                                                        <option value="">-- Select --</option>
                                                        @foreach($staff as $st)
                                                        <option value="{{ $st->id }}" data-name="{{ $st->first_name.' '.$st->last_name }}">{{ $st->first_name.' '.$st->last_name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="clearfix mt-3"></div>
                                        <div class="col-6">
                                            <button type="button" class="addStaff btn btn-primary"><i class="fas fa-plus-circle"></i> Add Staff</button>
                                        </div>
                                        <div class="col-6 text-end">
                                            <button class="btn btn-primary" type="submit">Save</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        @endif

                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                            @if($action == 'Edit')
                            <form class="" role="form" id="edit_form" action="{{ route('admin.appointment.services.timesheetUpdate',$record->id) }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="card-body pt-2">
                                    @foreach($days as $key=>$day)
                                    @php
                                    $from_time='';
                                    $to_time='';
                                    $dayoff=0;
                                    @endphp
                                    @if($day->timesheet->count()>0)
                                    @php

                                    $from_time=isset($day->timesheet[0]->from_time) ? $day->timesheet[0]->from_time : '';
                                    $to_time=isset($day->timesheet[0]->to_time) ? $day->timesheet[0]->to_time : '';
                                    $dayoff=$day->timesheet[0]->active;
                                    @endphp
                                    @endif
                                    <div class="row my-3">
                                        <h6>{{($key+1).'. '. $day->day}}</h6>
                                        <div class="col-md-4 col-4 form-group">
                                            <input name="from_time[]" type="time" class="form-control" placeholder="Select" value="{{$from_time}}">
                                        </div>
                                        <div class="col-md-4 col-4 form-group">
                                            <input name="to_time[]" type="time" class="form-control" placeholder="Select" value="{{$to_time}}">
                                        </div>
                                        <div class="col-md-4 col-4 dayoff-checkbox">
                                            <input type="hidden" class="dayoff_active" name="active[]" value="{{$dayoff}}" />
                                            <input class="form-check-input input-success dayoff_check" type="checkbox" id="customCheckc{{$key}}" value="0" {!! ($dayoff==0) ? 'checked' : '' !!}>
                                            <label class="form-check-label" for="customCheckc{{$key}}">Add day off</label>
                                        </div>
                                    </div>
                                    @endforeach
                                    <div class="col-12 text-end">
                                        <button class="btn btn-primary" type="submit">Save</button>
                                    </div>
                                </div>
                            </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@push('scripts')
<script>
    $(document).ready(function() {
        $('.staff-select').hide();
        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.appointment.categories.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();
            }
        });

        $(document).on('click', '.addStaff', function() {
            $('.staff-select').show();
        });

        $("#staff").select2();
        $(document).on('change', '#staff', function() {

            id = $(this).val();

            staff_ids = [];
            $('.staff_ids').each(function(i, obj) {
                stffid = $(this).val();
                staff_ids.push(stffid);
            });
            staff_ids.push(id);
            selectStaff(id, staff_ids);
        });

        function selectStaff(id, staff_ids) {
            $.ajax({
                url: "{{ route('admin.appointment.services.getStaff') }}",
                type: 'POST',
                data: {
                    _method: 'GET',
                    staff_id: id,
                    staff_ids: staff_ids
                },
                success: function(res) {
                    if (res.status == true) {
                        $('#staff').html(res.staffHtml);
                        $('.selectedStaff').append(res.html);
                        $('.staff-select').hide();
                    }
                }
            });
        }
        $(document).on('click', '.removeSelectedStaff', function() {
            id = 0;
            $(this).parent().parent().remove();
            staff_ids = [];
            $('.staff_ids').each(function(i, obj) {
                stffid = $(this).val();
                staff_ids.push(stffid);
            });
            selectStaff(id, staff_ids);
        });

        $(document).on('change', '.dayoff_check', function() {
            const isChecked = $(this).is(":checked");
            if (isChecked) {
                $(this).parent().find('.dayoff_active').val(0);
            } else {
                $(this).parent().find('.dayoff_active').val(1);
            }
        });
    });
</script>
@endpush