@extends('Staff.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">

<style>
    .search-cluster {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.65rem;
        flex: 1 1 auto;
    }

    .search-field {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 50px;
        min-width: 150px;
        height: 42px;
        padding: 0 12px;
        border-radius: 10px;
        border: 1px solid #e5e9f0;
        /* background: #f8fafc; */
        transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }

    .search-field i {
        flex: 0 0 auto;
        font-size: 15px;
        line-height: 1;
        color: #94a3b8;
        pointer-events: none;
    }

    .search-field input {
        flex: 1 1 auto;
        min-width: 0;
        height: 50px !important;
        border: none;
        background: transparent;
        padding: 0;
        font-size: 0.875rem;
        /* color: #1e293b; */
    }

    .search-field input:focus {
        outline: none;
        box-shadow: none;
    }

    .search-field:focus-within {
        /* background: #fff; */
        border-color: #696cff;
        box-shadow: 0 0 0 3px rgba(105, 108, 255, 0.12);
    }

    .btn-search {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 42px;
        padding: 0 18px;
        border-radius: 10px;
        border: none;
        background: #696cff !important;
        color: #fff !important;
        font-size: 0.875rem;
        font-weight: 500;
        white-space: nowrap;
        transition: background 0.15s ease, transform 0.1s ease;
    }

    .btn-search:hover {
        background: #5f61e6;
        color: #fff;
        transform: translateY(-1px);
    }
</style>
@section('content')

<div class="row align-items-center justify-content-between mb-4">
    <div class="col-auto">
        <h5 class="fw-bold mb-0"><button type="button" class="btn btn-icon bg-white waves-effect me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('staff.dashboard') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M15 6l-6 6l6 6"></path>
                    </svg>
                </a>
            </button>Goals</h5>
    </div>

</div>

<div class="card p-0">
    <div class="row align-items-center p-3 g-2">
        <div class="col-auto">
            <div class="d-flex align-items-center gap-2">
                <select class="form-select">
                    <option value="10">10</option>
                </select>
            </div>
        </div>

        <div class="col-auto ms-auto">
            <div class="d-flex align-items-center gap-2">
                <input type="text" id="customSearch" class="form-control" placeholder="Search..." style="width:180px;">
            </div>
        </div>
    </div>

    <div class="table-responsive px-3 pb-3">
        <table class="table" id="doctorsTable">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Date</th>
                    <th>Long Term</th>
                    <th>Short Term</th>

                </tr>
            </thead>
        </table>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function() {

        // Frontend Data
        const data = [{
                date: "26/05/2026",
                short_term_goal: "Improve technical skills",
                long_term_goal: "Become a Senior Developer"
            },
          
        ];

        const table = $('#doctorsTable').DataTable({
            data: data,

            pageLength: 10,
            lengthChange: false,
            searching: false,

            columnDefs: [{
                targets: '_all',
                className: 'text-nowrap'
            }],

            columns: [{
                    data: null,
                    orderable: false,
                    render: function(data, type, row, meta) {
                        return meta.row + 1;
                    }
                },
                {
                    data: 'date'
                },
                {
                    data: 'short_term_goal'
                },
                {
                    data: 'long_term_goal'
                }
            ]
        });


        // Custom Search
        $('#customSearch').on('keyup', function() {
            table.search(this.value).draw();
        });


        // Status Modal
        $(document).on('click', '.status-btn', function() {

            const id = $(this).data('id');
            const name = $(this).data('name');
            const status = $(this).data('status');

            $('#statusDoctorId').val(id);
            $('#statusDoctorName').val(name);
            $('#statusDoctorStatus').val(status);

            $('#statusForm').attr(
                'action',
                "{{ url('admin/doctor') }}/" + id + "/status"
            );
        });


        // Delete Modal
        $(document).on('click', '.delete-btn', function(e) {

            e.preventDefault();

            const id = $(this).data('id');

            const deleteUrl =
                "{{ url('admin/doctor') }}/" + id + "/delete";

            $('#deleteForm').attr('action', deleteUrl);

            $('#deleteModal').modal('show');
        });

    });
</script>
@endsection