@extends('admin.master')
@section('body')
    <div class="row mt-3">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Add Doctor</h4>
                    <h3 class="text-center" style="color: green">{{ session('message') }}</h3>
                    <hr>
                    <form action="{{ route('doctor.new') }}" class="form-horizontal p-t-20" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row">
                            <label for="exampleInputuname3" class="col-sm-3 control-label">Doctor's Name*</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="name" id="exampleInputuname3" placeholder="Doctor's Name">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="exampleInputuname3" class="col-sm-3 control-label">Specialities</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="specialities" id="exampleInputuname3" placeholder="Specialities">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="exampleInputuname3" class="col-sm-3 control-label">Experiences</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="experiences" id="exampleInputuname3" placeholder="Experiences">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="exampleInputuname3" class="col-sm-3 control-label">Practice Days</label>
                            <div class="col-sm-9">
                                    <div class="form-group">

                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" class="check" id="checkAll"> Check All
                                            </label>
                                        </div>

                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" class="check" value="Saturday"> Saturday
                                            </label>
                                        </div>


                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" class="check" value="Sunday"> Sunday
                                            </label>
                                        </div>

                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" class="check" value="Monday"> Monday
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" class="check" value="Tuesday"> Tuesday
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" class="check" value="Wednesday"> Wednesday
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" class="check" value="Thursday"> Thursday
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" class="check" value="Friday"> Friday
                                            </label>
                                        </div>
                                    </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="exampleInputuname3" class="col-sm-3 control-label">Doctor's Details</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" name="details" id="exampleInputuname3" placeholder="Doctors Details"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputPassword4" class="col-sm-3 control-label">Doctor's Image*</label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <label for="input-file-now" class="form-label"></label>
                                    <input type="file" name="image" id="input-file-now" class="dropify" />
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputPassword5" class="col-sm-3 control-label">Publication Status</label>
                            <div class="col-sm-9">
                                <label class="me-3"><input type="radio" name="status" value="1" checked> Published</label>
                                <label><input type="radio" name="status" value="0"> Unpublished</label>
                            </div>
                        </div>
                        <div class="form-group row m-b-0">
                            <div class="offset-sm-3 col-sm-9">
                                <button type="submit" class="btn btn-success waves-effect waves-light text-white">Save Department</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        var selectedValues = []; // Array to store selected values

        $("#checkAll").click(function () {
            $(".check").prop('checked', $(this).prop('checked'));
            updateSelectedValues();
        });

        $(".check").change(function () {
            updateSelectedValues();
            updateCheckAllState();
        });

        function updateSelectedValues() {
            selectedValues = []; // Reset the array
            $(".check:checked").each(function () {
                selectedValues.push($(this).val()); // Add the value to the array
            });
            console.log(selectedValues); // Display the selected values in the console (you can replace this with your logic)

            // Check the "Select All" checkbox if all individual checkboxes are checked
            var allChecked = $(".check").length === $(".check:checked").length;
            $("#checkAll").prop('checked', allChecked);
        }

        function updateCheckAllState() {
            // Check or uncheck the "Select All" checkbox based on the status of individual checkboxes
            var allChecked = $(".check").length === $(".check:checked").length;
            $("#checkAll").prop('checked', allChecked);
        }
    </script>
@endsection