@extends('layouts.app')
@section('title', 'Bank Account')

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>Space
            <small>Manage Space</small>
        </h1>
        <!-- <ol class="breadcrumb">
                                                                                                                                                                                                                                            <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
                                                                                                                                                                                                                                            <li class="active">Here</li>
                                                                                                                                                                                                                                        </ol> -->
    </section>

    <!-- Main content -->
    <section class="content">

        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Manage Space</h3>
                {{-- @can('category.create') --}}
                <div class="box-tools">
                    <button type="button" class="btn btn-block btn-primary btn-modal" data-toggle="modal"
                        data-target="#addSpace">
                        <i class="fa fa-plus"></i> @lang( 'messages.add' )</button>
                </div>
                {{-- @endcan --}}
            </div>
            <div class="box-body">
                @can('category.view')
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="space_table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Image</th>
                                    <th>Name</th>
                                    <th>Location ID</th>
                                    <th>Price</th>
                                    <th>Description</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                @endcan
            </div>
        </div>

        {{-- Add Bank Account Model --}}
        <div class="modal fade" id="addSpace" tabindex="-1" role="dialog"
            aria-labelledby="addSpaceCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addSpaceLongTitle">Add Space</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {!! Form::open(['url' => action('Restaurant\SpaceController@store'), 'method' => 'post', 'id' => 'add_space', 'enctype' => 'multipart/form-data']) !!}

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="category">Location</label>
                                {!! Form::select('location_id', $business_locations, null, ['class' => 'form-control input-sm mousetrap', 'placeholder' => __('lang_v1.select_location'), 'id' => 'select_location_id', 'required', 'autofocus']) !!}
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('name', 'Name' . ':*') !!}
                                {!! Form::text('name', null, ['class' => 'form-control', 'required', 'placeholder' => 'Space Name']) !!}
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('price', 'Price' . ':*') !!}
                                {!! Form::text('price', null, ['class' => 'form-control', 'required', 'placeholder' => 'Space Price']) !!}
                            </div>
                        </div>

                        <div class="clearfix"></div>

                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('image', 'Upload Space Image' . ':') !!}
                                {!! Form::file('image', ['id' => 'upload_image', 'accept' => 'image/*']); !!}
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                {!! Form::label('description', 'Account Description' . ':*') !!}
                                {!! Form::text('description', null, ['class' => 'form-control', 'required', 'placeholder' => 'Space Description']) !!}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary pull-right" id="submit_space_button">Add
                                    Space</button>
                            </div>
                        </div>

                        {!! Form::close() !!}
                    </div>
                </div>
               
            </div>
        </div>
        {{-- End Add Bank Account Model --}}

    </section>
    <!-- /.content -->

@endsection

@section('javascript')
    <script src="{{ asset('js/labels.js?v=' . $asset_v) }}"></script>

    <script type="text/javascript">
        //Roles table
        $(document).ready(function() {
            var users_table = $('#space_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '/modules/spaces',
                },
                columnDefs: [{
                    "targets": [7],
                    "orderable": false,
                    "searchable": false
                }],
                "columns": [
                    {
                        "data": "id"
                    },
                    {
                        "data": "image"
                    },
                    {
                        "data": "name"
                    },
                    {
                        "data": "location_id"
                    },
                    {
                        "data": "price"
                    },
                    {
                        "data": "description"
                    },
                    {
                        "data": "status",
                        render: function(data, type, row) {

                            if (row.status == 1) {
                                return '<div class="text-center" style="background-color:#39db77; color:white">Active</div>';
                            } else if (row.status == 0) {
                                return '<div class="text-center" style="background-color:#2ac4f7; color:white">Not Active</div>';
                            } 

                        }
                    },
                    {
                        "data": "action"
                    },
                ]
            });
            $(document).on('click', 'button.delete_space_button', function() {
                swal({
                    title: LANG.sure,
                    text: LANG.confirm_delete_user,
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                }).then((willDelete) => {
                    if (willDelete) {
                        var href = $(this).data('href');
                        var data = $(this).serialize();
                        $.ajax({
                            method: "DELETE",
                            url: href,
                            dataType: "json",
                            data: data,
                            success: function(result) {
                                if (result.success == true) {
                                    toastr.success(result.msg);
                                    users_table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            }
                        });
                    }
                });
            });

        });
    </script>


@endsection