@extends('layout.master')
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <style>
        .label_custom {
            font-size: 14px;
            font-weight: 700;
        }

        .save_btn {
            background-color: #112B66;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 10px;
        }

        .breadcum_active {
            color: gray;
            font-size: 12px;
            font-weight: 500;


        }

        .inactive_breadcum {
            color: black;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
        }

        .login-heading {
            font-size: 24px;
            /* Bigger and bold */
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            background: linear-gradient(45deg, #6a5acd, #483d8b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .stylish-input {
            width: 100%;
            padding: 12px 15px;
            font-size: 16px;
            font-weight: 500;
            color: #333;
            border: 2px solid #6a5acd;
            /* Purple border */
            border-radius: 8px;
            outline: none;
            transition: all 0.3s ease-in-out;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .stylish-input:focus {
            border-color: #483d8b;
            box-shadow: 0 4px 8px rgba(72, 61, 139, 0.3);
            background-color: #f8f8ff;
        }

        label {
            font-weight: 500;
            color: #333;
        }
    </style>
    <div class="main-content side-content pt-0">
        <div class="main-container container-fluid ">
            <div class="inner-body">
                <div class="col-lg-12 col-md-12 mt-5">
                    <div class="card custom-card overflow-hidden p-3">
                        <h2 class="mt-5 login-heading">Edit Nurses Attendence Details</h2>
                        <div class="breadcum">
                            <div class="d-flex align-items-center gap-3">
                                <a href="{{ url('/dashboard') }}">
                                    <p class="inactive_breadcum">Home</p>
                                </a>
                                <p class="mt-1 ">></p>
                                <a href="">
                                    <p class="inactive_breadcum">Edit Attendence Details</p>
                                </a>
                                <p class="mt-1 ">></p>
                                <p class="breadcum_active">Show</p>
                            </div>
                        </div>
                        <div class="">

                            <form method="post" action='{{ route('nurses.attendence.update', $editattendence->id) }}'>
                                @csrf

                                <div class="row">

                                    <div class="col-md-6 mt-3">
                                        <label for="" class="label_custom">UserName</label>
                                        <input readonly type="text" placeholder="title" class="form-control stylish-input"
                                            name="user_id" value="{{ $editattendence->user->name ?? 'N/A' }}">
                                    </div>

                                    <div class=" col-md-6 mt-3">
                                        <label for="" class="label_custom">clockin</label>
                                        <input readonly type="time" placeholder="country" class="form-control stylish-input"
                                            name="clockin" value="{{ $editattendence->clockin ?? 'N/A' }}">
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label class="label_custom" for="">clockout</label>
                                        <input type="time" placeholder="blog_description" class="form-control stylish-input"
                                            name="clockout" value="{{ $editattendence->clockout ?? 'N/A' }}">

                                    </div>
                                    <div class="col-md-6 mt-3">
                                        <label class="label_custom" for="">Hours worked</label>
                                        <input type="text" placeholder="hours worked" class="form-control stylish-input"
                                            name="hours_worked" value="{{ $editattendence->hours_worked ?? 'N/A' }}">

                                    </div>




                                    <div class="col-md-6 mt-3">
                                        <label class="label_custom" for="shift_completed">Shift Status</label>
                                        <select class="form-control" name="shift_completed">
                                            <option value="" disabled>Select Shift Status</option>
                                            <option value="completed"
                                                {{ isset($editattendence->shift_completed) && $editattendence->shift_completed == 'completed' ? 'selected' : '' }}>
                                                Completed
                                            </option>
                                            <option value="pending"
                                                {{ isset($editattendence->shift_completed) && $editattendence->shift_completed == 'pending' ? 'selected' : '' }}>
                                                Pending
                                            </option>
                                            <option value="cancelled"
                                                {{ isset($editattendence->shift_completed) && $editattendence->shift_completed == 'cancelled' ? 'selected' : '' }}>
                                                Cancelled
                                            </option>
                                        </select>
                                    </div>



                                    <div class="col-md-6 mt-3">
                                        <label class="label_custom" for="">User Status</label>
                                        <input type="text" placeholder="users status" class="form-control"
                                            name="users_status" value="{{ $editattendence->users_status ?? 'N/A' }}">

                                    </div>

                                    <div class="col-md-2 mt-4">
                                        <button type="submit" class="save_btn form-control">Save</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- Page Header -->


            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('#summernote').summernote();
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#summernote1').summernote();
        });
    </script>
@endsection