@extends('restaurant.pos.layout.master')

@section('custom_css')

@endsection

@section('content')
    <style>
        
    </style>


    <div class="card rounded-0">
        <div class="card-header d-flex justify-content-between align-items-center icon-triangle lt rounded-0">
            <h4 class="col-6 pl-0">Table Create</h4>
            
            <a href=" {{ route('restaurant.pos.table.index') }}" class="btn btn-sm btn-warning d-flex" type="button" name="button">
                <i class="bi bi-plus-lg me-1"></i>
                <div class="">List</div>
            </a>
        </div>

        <div class="card-body">
            <form action="@if (isset($edit)) {{ route('restaurant.pos.table.update') }} @else {{ route('restaurant.table.store') }} @endif" enctype="multipart/form-data" method="post">
                @csrf 

                <div class="row g-3">
                    <div class="col-md-6">
                        <label>Name</label>
                        <input type="text" value="@if (isset($edit)){{ $edit->name }}@else{{ old('name') }}@endif" name="name" 
                            class="form-control" />

                        <input type="hidden" value="@if (isset($edit)){{ $edit->id }}@endif" name="id" class="form-control" />
                        <input type="hidden" value="3" name="type" class="form-control" />
                        @if ($errors->has('name'))
                            <p class="error" style="color: red">{{ $errors->first('name') }}</p>
                        @endif
                    </div>

                    <div class="col-md-6">
                        <label>Capacity</label>
                        <input type="number" value="@if (isset($edit)){{ round($edit->price) }}@else{{ old('capacity') }}@endif" name="capacity"
                            class="form-control" />

                        @if ($errors->has('capacity'))
                            <p class="error" style="color: red">{{ $errors->first('capacity') }}</p>
                        @endif
                    </div>

                    <div class="col-md-6">
                        <label>Floor</label>
                        <select class="form-select customClass" required name="floor_id" id="Floor">
                            <option value="1"> -- Select Floor -- </option>
                            @foreach (getFloorList() as $data)
                                <option value="{{ $data->id }}" @if (isset($edit) && $edit->floor_id) {{ $edit->floor_id == $data->id ? 'selected' : '' }} @endif>{{ $data->floor_no }}</option>
                            @endforeach
                        </select>
                        @if ($errors->has('floor_id'))
                            <p class="error" style="color: red">{{ $errors->first('floor_id') }}</p>
                        @endif
                    </div>

                    <div class="col-md-6">
                        <label>Status</label>
                        <select class="form-select customClass" name="status">
                            <option value="1" @if (isset($edit)) {{ $edit->status == 1 ? 'selected' : '' }} @endif>Active</option>
                            <option value="2" @if (isset($edit)) {{ $edit->status == 2 ? 'selected' : '' }} @endif>Inactive</option>
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label>Icon </label>
                        <input type="file" id="file-upload" name="icon" class="form-control" />

                        @if (isset($edit) && $edit->icon)
                            <img src="{{ asset($edit->icon) }}" class="mt-2"  style="height: 50px; border: 2px solid grey;" />
                        @endif
                        <img id="blah" src="#" alt="" class="mt-2" style="height:50px; border: 2px solid grey; display: none;" />
                        @if ($errors->has('icon'))
                            <p class="error" style="color: red">{{ $errors->first('icon') }}</p>
                        @endif
                    </div>
                    
                    <div class="col-12">
                        <button type="submit" id="but_upload" class="btn btn-danger px-4">Submit</button>
                    </div>
                </div>
            </form>
        </div> 
    </div>
@endsection


@section('custom_js')
    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#blah').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
            $('#blah').show();
        }
        $("#file-upload").change(function() {
            readURL(this);
        });

        $(document).ready(function() {
            $('.customClass').select2({
                theme: "bootstrap-5",
                containerCssClass: "select2--small",
                dropdownCssClass: "select2--small",
            });
        });
    </script>
@endsection