@extends('body')
@section('title')
ADD RIGHTS
@endsection

@section('breadcrumbs')
<li><a href="{{ url('/') }}">Home</a></li>
<li>RIGHTS</li>
@endsection

@section('pageScripts')
<style>
    @media screen and (max-width: 600px) {

        th,
        td {
            white-space: nowrap;
        }



        .table-wrapper {
            overflow-x: scroll;
            width: 475px;
            margin: 0 auto;
        }

        .btn {
            font-size: 0.9rem;
            font-weight: bold;
            /* width: 100%; */
        }
    }
</style>


@endsection

@section('content')


<style>
    input {
        border-top-style: hidden;
        border-right-style: hidden;
        border-left-style: hidden;
        /* border-bottom-style: groove; */
        /* background-color: #eee; */
    }

    .no-outline:focus {
        outline: none;
    }
</style>

<section id="about" class="about">
    <div class="container" data-aos="fade-up">
        <legend>
            <center>
                <h2><b>ADD RIGHTS</b></h2>
            </center>
        </legend>
    </div>

    <div class="container" data-aos="fade-up">

        <div class="modal-header">

        </div>

        @if (session('success'))
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Info!</strong> {{ session('success') }}
        </div>
        @endif

        <div class="table-wrapper">
            <table class="table" id="myTable">
                <thead>
                    <tr>

                        <th>RIGHTS</th>
                        <th>DESCRIPTION</th>

                    </tr>
                </thead>
                <tbody>
                    <form class="form-horizontal" action="{!! route('rights.addnewrights') !!}" method="POST"
                        role="form" enctype="multipart/form-data">

                        @csrf
                        <tr>
                            <td>
                                <input type="text" id="object" name='object'
                                    class="no-outline @error('object') is-invalid @enderror" autofocus
                                    value="{{ old('object') ? old('object') :null }}">
                                @error('object')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </td>
                            <td>
                                <input type="text" id="operation" name='operation'
                                    class="no-outline @error('operation') is-invalid @enderror" autofocus
                                    value="{{ old('operation') ? old('operation') : null }}">
                                @error('operation')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </td>
                            <td>
                                <button type="submit" class="btn btn-info">Add</button>
                            </td>
                        </tr>
                    </form>
                </tbody>
            </table>
        </div>
    </div>
</section>

@endsection