@extends('layouts.cork')
@section('title', $title)

@section('page-css')
    <link href="/cork/src/plugins/src/table/datatable/datatables.css" rel="stylesheet" type="text/css">
    <link href="/cork/src/plugins/css/light/table/datatable/dt-global_style.css" rel="stylesheet" type="text/css" />
    <link href="/cork/src/plugins/css/dark/table/datatable/dt-global_style.css" rel="stylesheet" type="text/css" />
@endsection

@section('breadcrumb')
<div class="page-meta">
    <nav class="breadcrumb-style-one" aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('equipment.index') }}">Equipment</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
        </ol>
    </nav>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-12 text-end mb-4">
        <a href="{{ route('equipment.index') }}" class="btn btn-secondary">Back</a>
    </div>
</div>
<div class="row layout-top-spacing">
    <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
        <div class="widget-content widget-content-area br-8">
            <div class="p-4">
                <h4>Equipment Details</h4>
                <div class="row">
                    <div class="col-md-6">
                        <h5>Name: {{ $equipment->name }}</h5>
                        <h5>Department: {{ $equipment->department?->name ?? 'N/A' }}</h5>
                    </div>
                    <div class="col-md-6">
                        <h5>Serial #: {{ $equipment->serial_num }}</h5>
                        <h5>Asset Tag: {{ $equipment->asset_tag }}</h5>
                    </div>
                </div>
            </div>
            <hr>
            <div class="p-4">
                <h4>Checkout Log</h4>
                <table id="zero-config" class="table table-striped dt-table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>Date/Time</th>
                            <th>Student Name</th>
                            <th>Teacher Name</th>
                            <th>Checked In/Out</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($equipment->equipmentCheckOuts as $log)
                            <tr>
                                <td>{{ $log->created_at }}</td>
                                <td>{{ $log->student->first_name }} {{ $log->student->last_name }}</td>
                                <td>{{ $log->teacher->first_name }} {{ $log->teacher->last_name }}</td>
                                <td>
                                    <span class="badge badge-light-{{ $log->checked_out ? 'danger' : 'success' }}">{{ $log->checked_out ? 'Checked Out' : 'Checked In' }}</span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-js')
    <script src="/cork/src/plugins/src/table/datatable/datatables.js"></script>
    <script>
        $(document).ready(function() {
            var oTable = $('#zero-config').DataTable({
                "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                "<'table-responsive'tr>" +
                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
                "oLanguage": {
                    "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' }
                },
                "stripeClasses": [],
                "lengthMenu": [7, 10, 20, 50],
                "pageLength": 10,
                "order": [[ 0, "desc" ]] 
            });
        });
    </script>
@endsection