@extends('layouts.app')
@section('title') {{ 'Hotels' }} @endsection
@section('breadcrumb', Breadcrumbs::render('hotel-file'))
@section('content')
    <section class="card">
        <div class="">
            <div id="append-filter-text"></div>
        </div>
        <div class="row p-2">
            <div class="col-md-12">
                <header class="card-header bold d-flex justify-content-between px-2 pt-2 pb-3">
                    <div>Images</div>
                </header>
                <div class="col-md-3">
                    <form action="{{ route('hotelimageUpload') }}" method="post" enctype="multipart/form-data">
                        @csrf <div class="row">
                            {!! Form::select('type', ['1' => 'Gallery', '2' => 'Slider'], null, [
                                'class' => 'form-control type',
                                'required',
                                'placeholder' => trans('fields.select'),
                            ]) !!}
                            @if ($errors->has('type'))
                                <p class="help-block">{{ $errors->first('type') }}</p>
                            @endif
                        </div>
                        <br>
                        <div class="row">
                            <div class="input-group">
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" placeholder="hi" required
                                        name="imageFile">
                                    <label class="custom-file-label" id="dimention">Dimention 498*322 pixel,
                                        Size:2MB</label>
                                </div>
                                @if ($errors->has('imageFile'))
                                    <p class="help-block">{{ $errors->first('imageFile') }}</p>
                                @endif
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            {!! Form::text('url', null, [
                                'class' => 'form-control',
                                'placeholder' => trans('fields.url'),
                                'rows' => '5',
                                'maxlength' => '150',
                            ]) !!}
                            @if ($errors->has('url'))
                                <p class="help-block">{{ $errors->first('url') }}</p>
                            @endif
                        </div>
                        <button type="submit" name="submit" class="btn btn-primary  mt-4">Submit
                        </button>
                        <input data-name="id" name="id" type="hidden"
                            value="@if (!empty($id)) {{ $id }} @else '' @endif" />
                    </form>
                </div>
            </div>
        </div>
        <div class="px-4 bg-light" id="filter-datatable-block__distributor-list">
            <div class="collapse mb-4 mt-4" id="collapse-table-filter-distributor-list">
                <div class="">
                    <div class="row">

                        <div class="col-md-3">
                            <div class="form-group">
                                <label>{{ __('fields.created_by') }}</label>
                                <select data-name="created by" class="form-control get-created-user"
                                    name="category_created_by">
                                    <option value="">- Created by -</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>{{ __('fields.created_at') }}</label>
                                <input data-name="created at" name="category_created_at" class="datepicker form-control"
                                    placeholder="Date" />

                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-2 text-right">
                    <button data-type="datatable" data-table="distributor-list"
                        class="btn btn-info btn-sm reset-datatable-filter">Clear</button>
                    <button data-type="datatable" data-table="distributor-list"
                        class="btn btn-dark btn-sm datatable-filter-find">Submit</button>
                </div>
            </div>
        </div>

        <x-Datatable id="tbl-files-hotels" headers="Image,Url,Type" createUrl="pricings.create" filter="false"
            create="false" hiddenHeaders="status,created by" title="Hotels" checkbox="check">
        </x-Datatable>
    </section>
    <br>

    <div class="form-group col-md-3">
        <label>
            <h5>Bulk Action</h5>
        </label>
    </div>
    <div class="form-group col-md-3">
        <label>Choose Action</label>

        {!! Form::select(
            'submit_type',
            ['' => 'Type', '1' => 'Delete'],
            isset($result->submit_type) ? $result->submit_type : null,
            ['class' => ' form-control', 'required', 'id' => 'submit_type', 'data-name' => 'submit_type'],
        ) !!}
    </div>
    <div class="form-group col-md-3 text-right">
        <button id="multiple_delete" class="btn  btn-secondary"> Submit</button>
    </div>
    <div class="modal fade " id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    </div>

@endsection
@section('script')
    <script src="{{ asset('modules/admin/hotels/filesdatatable.js') }}"></script>
    <script>
        $('#images').on('change', function(e) {
            var fileName = e.target.files[0].name;
            $(this).next('.custom-file-label').html(fileName);
        })
        $('.type').on('change', function() {
            if ($(this).val() === '1') {

                $('#dimention').text('Dimention 350*347 pixel,  Size:2MB');
            }
            if ($(this).val() === '2') {

                $('#dimention').text('Dimention 498*322 pixel,  Size:2MB');
            }

        })
        
    </script>
@endsection