@extends("layouts.admin.app")
@section("page-title")
    Create Admin
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>Create Appointment</h1>
            <p>Create Appointment</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">Create Appointment</a></li>
            <li class="breadcrumb-item"><a href="#">Create Appointment</a></li>
        </ul>
    </div>
@endsection
@section("content")
    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">Create Appointment</h3>
                <div class="tile-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <input type="button" id="myButton" value="Create Appointment For New User"
                                   onclick="Buttontoggle();" style="display: block;border: none;color: white;width: 100%;padding: 10px;border-radius: 4px;background:#343a40">
                        </div>
                        <div class="col-sm-6">
                            <input type="button" id="myButtonUser" value="Create Appointment For An Online User"
                                   onclick="UserButtontoggle();" style="display: block;border:none;color: white;width: 100%;padding: 10px;border-radius: 4px;background:#343a40">
                        </div>
                    </div>
                    <form method="post" action="{{route('admin.date.store')}}" enctype="multipart/form-data">
                        @csrf
                            <div class="row"  id="data" style="display: none;margin: 10px auto">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label">Full name</label>
                                        <input class="form-control @if($errors->has('full_name')) is-invalid @endif" type="text" name="full_name" placeholder="Enter Full name" value="{{inputValue("full_name")}}">
                                    </div>
                                    @error("full_name")
                                    <div class="input-error">{{$message}}</div>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label">Email</label>
                                        <input class="form-control @if($errors->has('email')) is-invalid @endif" type="text" name="email" placeholder="example : example@example.com" value="{{inputValue("email")}}">
                                    </div>
                                    @error("email")
                                    <div class="input-error">{{$message}}</div>
                                    @enderror
                                </div>
                                <livewire:create-appointment />
                                <div class="col-lg-6" style="display: flex">
                                    <div class="form-group">
                                        <select class="form-select" name="object_id" aria-label="Default select example" style="margin: 10px 0px;background: none;padding: 10px;border-radius: 7px">
                                            @foreach($doctors as $index => $doctor)
                                                <option value="{{$doctor->object_id}}">{{ $doctor->full_name }}</option>
                                           @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <select class="form-select" name="is_online" aria-label="Default select example" style="background: none;margin:10px;padding: 10px;border-radius: 7px">
                                            <option selected disabled>IS Online ?</option>
                                            <option value="1">Yes</option>
                                            <option value="0">No</option>
                                        </select>
                                    </div>
                                </div>

                            </div>
                            <div class="row" id="userData" style="display: none;margin: 10px auto">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <select class="form-select" name="user" aria-label="Default select example" style="background: none;padding: 10px;border-radius: 7px">
                                            <option selected disabled>Select User</option>
                                            @foreach($users as $user)
                                            <option value="{{$user->id}}">{{$user->full_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <livewire:create-appointment />
                                <div class="col-lg-6" style="display: flex">
                                    <div class="form-group">
                                        <select class="form-select" name="object_id" aria-label="Default select example" style="margin: 10px 0px;background: none;padding: 10px;border-radius: 7px">
                                            @foreach($doctors as $index => $doctor)
                                                <option value="{{$doctor->object_id}}">{{ $doctor->full_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <select class="form-select" name="is_online" aria-label="Default select example" style="background: none;margin:10px;padding: 10px;border-radius: 7px">
                                            <option selected disabled>IS Online ?</option>
                                            <option value="1">Yes</option>
                                            <option value="0">No</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="tile-footer">
                                <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i>Create</button>
                            </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
@endsection
@section("scripts")
    <script type="text/javascript">
        function Buttontoggle()
        {
            var t = document.getElementById("myButton");
            if(t.value=="Create Appointment For New User"){
                $("#data").css("display","block");
                $("#userData").css("display","none");
                $("#myButtonUser").css("display","block");

            }
        }
        function UserButtontoggle(){
            var t = document.getElementById("myButtonUser");
            if(t.value=="Create Appointment For An Online User"){
                $("#userData").css("display","block");
                $("#myButton").css("display","block");
                $("#data").css("display","none");
                $("#data").css("display","none");
            }
        }
    </script>
@endsection