@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->
 
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">

    <link rel="stylesheet" type="text/css" href="/app-assets/css/meeting-room.css">


    {{-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> --}}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet">
    <!-- END: Page CSS-->
    <style>
        .label-info {
            background-color: #5bc0de;
        }
    </style>
@endpush
@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">
                {{trans('meeting-room-booking.meeting_rooms')}}
            </h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{$base_url}}/home">
                            {{trans('master/master.home')}}
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{$base_url}}/meeting-rooms">
                            {{trans('meeting-room-booking.meeting_rooms')}}
                        </a>
                    </li>
                    <li class="breadcrumb-item active">
                        @if(isset($meetingRoom) && ($meetingRoom->id))
                            {{trans('meeting-room-booking.edit')}}
                        @else
                            {{trans('meeting-room-booking.add_new')}}
                        @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')


<!-- Basic multiple Column Form section start -->
{!! Form::model($meetingRoom, ['method' => isset($meetingRoom) && $meetingRoom->id ? 'put' : 'post', 'files' => 'true']) !!}
    <section class="vertical-wizard">
        <div class="bs-stepper vertical vertical-wizard-example">
            <div class="bs-stepper-header">
                <div class="step" data-target="#meeting-room-vertical" role="tab" id="meeting-room-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">1</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('meeting-room-booking.meeting_room')}}</span>
                            <span class="bs-stepper-subtitle">
                                @if(isset($meetingRoom) && ($meetingRoom->id))
                                    {{trans('meeting-room-booking.edit')}}
                                @else
                                    {{trans('meeting-room-booking.add_new')}}
                                @endif
                            </span>
                        </span>
                    </button>
                </div>
                <div class="step" data-target="#other-details-vertical" role="tab" id="other-details-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">2</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('meeting-room-booking.other_details')}}</span>
                            <span class="bs-stepper-subtitle">
                                @if(isset($meetingRoom) && ($meetingRoom->id))
                                    {{trans('meeting-room-booking.edit')}}
                                @else
                                    {{trans('meeting-room-booking.add_other_details')}}
                                @endif
                            </span>
                        </span>
                    </button>
                </div>
            </div>
            <div class="bs-stepper-content">
                <div id="meeting-room-vertical" class="content position-relative" role="tabpanel" aria-labelledby="meeting-room-vertical-trigger">
                    <div class="row">                       
                        <div class="col-md-6">
                            <label class="form-label" for="floor_id" class="required">{{trans('meeting-room-booking.floor')}}
                                <span class="mendatory-field text-danger">*</span>
                            </label>
                            <select class="form-control select2 {{{ $errors->has('floor_id') ? 'error' : '' }}}" id="floor_id" name="floor_id">
                                <option value="">Select Floor</option>
                                @foreach($organizationFloors as $organizationFloor)
                                    <option value="{{$organizationFloor->id}}"  @if(isset($meetingRoom) && ($meetingRoom->floor_id == $organizationFloor->id) || (old('floor_id') == $organizationFloor->id)) selected @endif>
                                        {{$organizationFloor->name}} 
                                    </option>
                                @endforeach
                            </select>
                            {!! $errors->first('floor_id', '<label id="basic-default-name-error" for="floor_id" class="error">:message</label>')!!}
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="username">
                                    {{trans('master/master.name')}} 
                                    <span class="mendatory-field text-danger">*</span>
                                </label>
                                {!! Form::text('name', isset($meetingRoom) && $meetingRoom->name ? $meetingRoom->name : old('name'), ['class' => 'form-control', 'id' => 'name']) !!} {!! $errors->first('name', '
                                    <label class="error" for="name">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('capacity') ? 'has-error' : '' }}}">
                                <label class="form-label" for="capacity">
                                    {{trans('meeting-room-booking.capacity')}} 
                                    <span class="mendatory-field text-danger">*</span>
                                </label>
                                {!! Form::text('capacity', isset($meetingRoom) && $meetingRoom->capacity ? $meetingRoom->capacity : old('capacity'), ['class' => 'form-control', 'id' => 'capacity']) !!} {!! $errors->first('capacity', '
                                    <label class="error" for="capacity">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{trans('master/master.status')}} <span class="mendatory-field text-danger">*</span></label>
                            <select class="form-select select2" name="status" required>
                                @foreach($meetingRoomStatus as $val)
                                    <option value="{{$val}}"  @if(isset($meetingRoom) && ($meetingRoom->status == $val) || (old('status') == $val)) selected @endif>
                                        {{ucwords($val)}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row">                       
                        <div class="col-md-6">
                            <label for="image" class="form-label">{{trans('employee/employee_create.image')}}
                                <span class="mendatory-field text-danger">*</span>
                            </label>
                            <div>
                                <input type="file" name="image" accept="image/png, image/gif, image/jpeg, image/jpg" id="inputFile" data-filename-placement="inside" title="Browse">
                            </div>
                            <div class="uploadedDocBox newupload-box" id="uploadedDocBox">
                                @if(isset($meetingRoom) && $meetingRoom->image)
                                    <img src="{{ asset($meetingRoom->image) }}"  >
                                @endif
                            </div>
                            {!! $errors->first('image', '<label class="error" for="image">:message</label>') !!}
                        </div>
                    </div>
                    <div class="content-footer  bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer" style="float:right">
                            <button type="button" class="btn btn-primary btn-next" >
                                <span class="align-middle d-sm-inline-block d-none">{{trans('employee/employee_create.next')}}</span>
                                <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div id="other-details-vertical" class="content position-relative" role="tabpanel" aria-labelledby="other-details-vertical-trigger">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label" for="name">
                                {{ trans('meeting-room-booking.features') }}
                                <span class="mendatory-field text-danger">*</span>
                            </label>
                            <div>
                                <input type="text" id="tags" name="tags" class="form-control" data-role="tagsinput" value="{{ old('tags', implode(',', $selectedTags)) }}">
                            </div>  
                            {!! $errors->first('tags', '<label class="error" for="tags">:message</label>')!!}                                                                                                       
                        </div>   
                        <div class="col-md-6">
                            <label for="other_image" class="form-label">
                                {{trans('meeting-room-booking.other_images')}}
                            </label>
                            <div>
                                <input type="file" name="other_images[]" id="other_image" multiple>
                            </div>
                            {!! $errors->first('other_images.*', '<label class="error" for="other_images.*">:message</label>') !!}
                        </div>                                                                                                                                                                            
                    </div>
                    <div class="imagePreviewBox" >
                        <div class="row" style="margin-top:2%;margin-bottom:2%;" id="appendImages">
                                @if(isset($meetingRoom) && $meetingRoom->other_image)
                                    @foreach($meetingRoom->other_image as $image)
                                        <div class="col-md-2">
                                            <div class="others-imgbox position-relative">
                                                <img src="{{ $image->full_url }}" class="others-imgsinner">
                                                <a href="#" class="delImageNew">
                                                    <img src="/assets/img/closered.svg"  class="new-closeimginner" onclick="return confirmImageDelete({{ $image->id  }});">
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                        </div> 
                    </div>                   
                    <div class="content-footer mt-auto bottom-0 col-md-12">
                        <div class="d-flex justify-content-between">
                            <button type="button" class="btn btn-outline-secondary btn-prev">
                                <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                <span class="align-middle d-sm-inline-block d-none">{{trans('employee/employee_create.previous')}}</span>
                            </button>
                            <button type="submit" class="btn btn-success btn-submit" id="confirm-submit-text">{{trans('employee/employee_create.submit')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Confirmation Modal -->
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteConfirmationLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteConfirmationLabel">Confirm Delete</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete this image?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">No</button>
                        <button type="button" class="btn btn-primary" id="deleteAction">Yes</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
{!! Form::close() !!} 
<!-- Basic Floating Label Form section end -->

@endsection 

@push('footer-script')

<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/form-validation.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>


<!-- END: Page JS-->
<script type="text/javascript">
        $(document).ready(function() {
            $('#tags').tagsinput({
                allowDuplicates: true,
                maxTags: 5,
                trimValue: true,
                delimiter: ';'
            });
        });
    
    var lengthFIle = 0;
    $("#other_image").on("change", function (e) {
        var files = e.target.files,
        filesLength = files.length;
        var actualFileLength = 0;
        var countImage = {{ count($meetingRoom->other_image)}};
        if(countImage > 0 ){
            actualFileLength = countImage;
        }
        filesLength += actualFileLength;
        lengthFIle++;
            if (filesLength > 6 || lengthFIle > 6) {
                Swal.fire(
                    'Warning!',
                    'You can upload maximum 6 images',
                    'warning'
                );
                return false;
            } else {
                for (var i = 0; i < filesLength; i++) {
                    var f = files[i];
                    var fileReader = new FileReader();

                    fileReader.onload = (function (e) {
                        var file = e.target;
                        let append = `
                                <div class="col-md-2">
                                    <div class="others-imgbox position-relative">
                                        <img src="${e.target.result}" class="others-imgsinner">
                                        <a href="#" class="delImageNew">
                                            <img src="/assets/img/closered.svg" class="new-closeimginner" >
                                        </a>
                                    </div>
                                </div>`;
                        $('#appendImages').append(append);
                    });
                    fileReader.readAsDataURL(f);
                }
            }
    });


    
    document.getElementById('inputFile').addEventListener('change', function(event) {
    const uploadedDocBox = document.getElementById('uploadedDocBox');
    uploadedDocBox.innerHTML = "";  

        const files = event.target.files;

            if (files.length > 0) {
                const file = files[0];
                
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        uploadedDocBox.appendChild(img);
                    };
                    
                    reader.readAsDataURL(file);
                } else {
                    alert('Please select only an image file.');
                }
        }
    });


    $(document).on('click', '[data-request="remove-image"]', function () {
        var $this = $(this);
        $this.closest('div').remove();
    });
    
    function confirmImageDelete(id) {
        window.location.href = "{{$base_url}}/meeting-room/{{ $meetingRoom->id }}/image-delete/" + id;
        // $('#deleteModal').modal('show');
        // $('#deleteAction').off('click').on('click', function() {
        // });
    }
</script>
@endpush