@extends('layouts.app')
@section('content')
    <div class="push-top">
        <div class="container">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-12">
                        <h2>
                            Availability
                            <a><button id="unavailableBtn" style="float: right;" class="btn btn-danger" data-bs-toggle="modal"
                                    data-bs-target="#unavailableModal">Make me unavailable</button></a>
                        </h2>
                    </div>

                </div>


                <form id="availability" name="availability" action="{{ URL::route('admin.availability.update') }}"
                    method="POST" autocomplete="off">
                    {{ csrf_field() }}

                    <div id="same-day" class="row">
                        <div class="col-md-12">
                            <h4 style="">Service Availability</h4>
                        </div>
                        <div class="col-md-12">
                            <p>
                                The options below are for special availability. Please review the options and toggle the
                                switch to on
                                (blue) then click save to update your availability.
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <label>Free Sample</label> <i class="icon fa fa-info-circle popover-icon" title="Free Sample"
                                data-content="Click Yes if you would like to make yourself available for Free Sample editing requests."></i>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch">

                                <input type="checkbox" name="free_sample" id="option1" autocomplete="off"
                                    class="form-check-input" >
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <label>2-Hour Editing</label> <i class="icon fa fa-info-circle popover-icon"
                                title="2-Hour Editing"
                                data-content="Click Yes if you would like to make yourself available for 2-Hour editing requests."></i>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch" aria-label="Basic checkbox toggle">
                                <input type="checkbox" name="2_hour" id="2_hour_option1" autocomplete="off"
                                    class="form-check-input" >

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <label>4-Hour Editing</label> <i class="icon fa fa-info-circle popover-icon"
                                title="4-Hour Editing"
                                data-content="Click Yes if you would like to make yourself available for 4-Hour editing requests."></i>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch" aria-label="Basic checkbox toggle">
                                <input type="checkbox" name="4_hour" id="4_hour_option1" autocomplete="off"
                                    class="form-check-input" >

                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <label>8-Hour Editing</label> <i class="icon fa fa-info-circle popover-icon"
                                title="8-Hour Editing"
                                data-content="Click Yes if you would like to make yourself available for 8-Hour editing requests."></i>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch" aria-label="Basic checkbox toggle">
                                <input type="checkbox" name="8_hour" id="8_hour_option1" autocomplete="off"
                                    class="form-check-input" >

                            </div>
                            {{-- <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                                <input type="radio" name="8_hour" id="8_hour_option1" autocomplete="off" value="0"
                                    class="btn-check" <php if(in_array(15,$specs)){ ?> checked <php } ?>>
                                <label class="btn knowmad_btn_blue knowmad_btn avilable_btn" for="8_hour_option1">

                                    Yes </label>
                                <input type="radio" name="8_hour" id="8_hour_option2" autocomplete="off" value="1"
                                    class="btn-check" <php if(!in_array(15,$specs)){ ?> checked <php } ?>>
                                <label class="btn knowmad_btn_blue knowmad_btn avilable_btn" for="8_hour_option2">
                                    No
                                </label>
                            </div> --}}
                        </div>
                    </div>

                    <div class="col-md-offset-10 col-md-2 push-top mb-2">
                        <button type="submit" class="btn knowmad_btn_blue knowmad_btn width_fitContent">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="unavailableModal" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Unavailable</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to be unavailable? This will keep you from receiving any editing requests until
                        you make yourself available again.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                    <a href="{{ URL::route('admin.toggleAvailability', [0]) }}" class="btn btn-danger">Make
                        unavailable</a>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@stop
@push('footer_js')
@endpush