@extends(BaseHelper::getAdminMasterLayoutTemplate())
@section('content')
    <style>
        .form-group {
            margin-bottom: 1rem !important;
        }
        .aiz-switch {
            position: relative;
            display: inline-block;
            width: 40px;  
            height: 22px;  
        }

        .aiz-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px; 
            width: 16px;    
            left: 3px;      
            bottom: 3px;
            background-color: white;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:checked + .slider:before {
            transform: translateX(18px); 
        }

        .slider.round {
            border-radius: 22px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
        .form-label{
            align-self: center;
            margin-bottom: .0rem !important;
        }
    </style>

    <div class="col-lg-8 mx-auto">
        <div class="card">
            <div class="card-header">
                <h3 class="mb-0">{{ isset($document) ? 'Edit Document Type' : 'Add Document Type' }}</h3>
            </div>
            <div class="card-body">
                {{-- @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif --}}

                <form action="{{ isset($document) ? route('document.store', $document->id) : route('document.store') }}" method="POST">
                    @csrf
                    @if(isset($document))
                        <input type="hidden" name="id" value="{{ $document->id }}">
                    @endif
                    <div class="form-group row">
                        <label class="col-sm-3 form-label form-label required" for="name">
                           Name
                        </label>
                        <div class="col-sm-9">
                            <input type="text" placeholder="Name" id="name" name="name"
                                class="form-control name" required value="{{ old('name', $document->name ?? '') }}">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-md-3 form-label form-label">Status</label>
                        <div class="col-md-9">
                            <select class="form-control form-select" id="status" name="status" required>
                                <option value="actived" {{ old('status', $document->status ?? 'actived') == 'actived' ? 'selected' : '' }}>Active</option>
                                <option value="inactived" {{ old('status', $document->status ?? 'actived') == 'inactived' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-3 form-label" for="is_default">Is Default</label>
                        <div class="col-sm-9">
                            <label class="aiz-switch aiz-switch-success mb-0">
                                <input type="checkbox" name="is_default" id="is_default" value="1"
                                    {{ old('is_default', $document->is_default ?? false) ? 'checked' : '' }}>
                                <span class="slider round"></span>
                            </label>
                        </div>
                    </div>

                    <div class="form-group mb-0 text-end">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection