@extends('templates.app')
@section('container')
    <div class="card-secton transfer-section">
        <div class="tf-container">
            <div class="tf-balance-box">
                <form action="{{ url('/my-dinas-luar') }}">
                    <div class="row">
                        <div class="col-4">
                            <input type="datetime" class="form-control" name="mulai" placeholder="Tanggal Mulai" id="mulai" value="{{ request('mulai') }}">
                        </div>
                        <div class="col-4">
                            <input type="datetime" class="form-control" name="akhir" placeholder="Tanggal Akhir" id="akhir" value="{{ request('akhir') }}">
                        </div>
                        <div class="col-4">
                            <button type="submit" id="search" class="form-control btn" style="width: 25px"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="tf-spacing-20"></div>
    <style>
        /* =========================================================
           PAYROLL CARD
        ========================================================= */
        
        .payroll-card {
            width: 100%;
            max-width: 100%;
        
            position: relative;
        
            background: #ffffff;
        
            border: 1px solid #e7eaf0;
            border-radius: 18px;
        
            box-shadow:
                0 2px 5px rgba(16, 24, 40, 0.03),
                0 10px 30px rgba(16, 24, 40, 0.07);
        
            /*
             * CARD TIDAK IKUT MELEBAR
             */
            overflow: hidden;
        
            box-sizing: border-box;
        }
        
        
        /* =========================================================
           CARD HEADER
        ========================================================= */
        
        .payroll-card-header {
            display: flex;
        
            align-items: center;
            justify-content: space-between;
        
            padding: 22px 24px 18px;
        
            background: #ffffff;
        
            border-bottom: 1px solid #edf0f4;
        }
        
        
        .payroll-card-title {
            margin: 0 0 4px;
        
            color: #1d2939;
        
            font-size: 18px;
            font-weight: 700;
        
            line-height: 1.4;
        }
        
        
        .payroll-card-subtitle {
            margin: 0;
        
            color: #98a2b3;
        
            font-size: 13px;
        
            line-height: 1.5;
        }
        
        
        /* =========================================================
           TABLE SCROLL
        ========================================================= */
        
        .payroll-table-scroll {
            display: block;
        
            width: 100%;
            max-width: 100%;
        
            /*
             * HANYA BAGIAN TABLE INI YANG SCROLL
             */
            overflow-x: auto !important;
            overflow-y: hidden;
        
            -webkit-overflow-scrolling: touch;
        
            box-sizing: border-box;
        }
        
        
        /* =========================================================
           DATATABLE WRAPPER
        ========================================================= */
        
        /*
         * Kalau tablePayroll diproses oleh DataTables,
         * DataTables akan membuat wrapper ini.
         *
         * Wrapper dibuat lebih lebar daripada card.
         * Tetapi card TIDAK ikut melebar.
         */
        
        .payroll-table-scroll #tablePayroll_wrapper {
            width: 1650px;
            min-width: 1650px;
        
            margin: 0;
        
            box-sizing: border-box;
        }
        
        
        /* Fix Bootstrap negative margin */
        .payroll-table-scroll #tablePayroll_wrapper > .row {
            width: 100%;
        
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        
        
        .payroll-table-scroll
        #tablePayroll_wrapper
        > .row
        > [class*="col-"] {
        
            padding-left: 0 !important;
            padding-right: 0 !important;
        
            box-sizing: border-box;
        }
        
        
        /* =========================================================
           TABLE
        ========================================================= */
        
        #tablePayroll {
            width: 1650px !important;
            min-width: 1650px !important;
        
            margin: 0 !important;
        
            border-collapse: separate !important;
            border-spacing: 0 !important;
        
            border: none !important;
        
            background: #ffffff;
        }
        
        
        /* =========================================================
           HEADER
        ========================================================= */
        
        #tablePayroll thead th {
            padding: 15px 18px !important;
        
            background: #f8fafc !important;
        
            color: #344054 !important;
        
            font-size: 13px;
            font-weight: 600;
        
            line-height: 1.4;
        
            vertical-align: middle;
        
            white-space: nowrap;
        
            border-top: none !important;
            border-left: none !important;
            border-right: none !important;
        
            border-bottom: 1px solid #e4e7ec !important;
        }
        
        
        /* =========================================================
           LEBAR KOLOM
        ========================================================= */
        
        #tablePayroll th:nth-child(1) {
            min-width: 65px;
        }
        
        #tablePayroll th:nth-child(2) {
            min-width: 170px;
        }
        
        #tablePayroll th:nth-child(3) {
            min-width: 220px;
        }
        
        #tablePayroll th:nth-child(4) {
            min-width: 120px;
        }
        
        #tablePayroll th:nth-child(5) {
            min-width: 120px;
        }
        
        #tablePayroll th:nth-child(6) {
            min-width: 150px;
        }
        
        #tablePayroll th:nth-child(7) {
            min-width: 145px;
        }
        
        #tablePayroll th:nth-child(8) {
            min-width: 120px;
        }
        
        #tablePayroll th:nth-child(9) {
            min-width: 120px;
        }
        
        #tablePayroll th:nth-child(10) {
            min-width: 180px;
        }
        
        #tablePayroll th:nth-child(11) {
            min-width: 145px;
        }
        
        #tablePayroll th:nth-child(12) {
            min-width: 120px;
        }
        
        #tablePayroll th:nth-child(13) {
            min-width: 145px;
        }
        
        
        /* =========================================================
           BODY
        ========================================================= */
        
        #tablePayroll tbody td {
            padding: 15px 18px !important;
        
            background: #ffffff;
        
            color: #475467;
        
            font-size: 13px;
        
            line-height: 1.5;
        
            vertical-align: middle;
        
            border-top: none !important;
            border-left: none !important;
            border-right: none !important;
        
            border-bottom: 1px solid #f0f2f5 !important;
        }
        
        
        /* Zebra */
        #tablePayroll tbody tr:nth-child(even) td {
            background: #fcfcfd;
        }
        
        
        /* Hover */
        #tablePayroll tbody tr:hover td {
            background: #f5f8ff !important;
        }
        
        
        #tablePayroll tbody tr:last-child td {
            border-bottom: none !important;
        }
        
        
        /* =========================================================
           EMPLOYEE
        ========================================================= */
        
        .payroll-employee-name {
            color: #344054;
        
            font-weight: 600;
        
            white-space: nowrap;
        }
        
        
        /* =========================================================
           SHIFT
        ========================================================= */
        
        .payroll-shift {
            display: flex;
        
            flex-direction: column;
        
            gap: 3px;
        
            white-space: nowrap;
        }
        
        
        .payroll-shift strong {
            color: #344054;
        
            font-size: 13px;
            font-weight: 600;
        }
        
        
        .payroll-shift small {
            color: #98a2b3;
        
            font-size: 11px;
        }
        
        
        /* =========================================================
           JAM
        ========================================================= */
        
        .payroll-time {
            display: inline-flex;
        
            align-items: center;
        
            color: #344054;
        
            font-weight: 600;
        
            white-space: nowrap;
        }
        
        
        /* =========================================================
           STATUS
        ========================================================= */
        
        .payroll-status {
            display: inline-flex;
        
            align-items: center;
        
            padding: 6px 10px;
        
            border-radius: 50px;
        
            font-size: 11px;
            font-weight: 600;
        
            line-height: 1;
        
            white-space: nowrap;
        }
        
        
        /* Success */
        .payroll-status-success {
            color: #067647;
        
            background: #ecfdf3;
        
            border: 1px solid #abefc6;
        }
        
        
        /* Warning */
        .payroll-status-warning {
            color: #b54708;
        
            background: #fffaeb;
        
            border: 1px solid #fedf89;
        }
        
        
        /* Danger */
        .payroll-status-danger {
            color: #b42318;
        
            background: #fef3f2;
        
            border: 1px solid #fecdca;
        }
        
        
        /* Info */
        .payroll-status-info {
            color: #175cd3;
        
            background: #eff8ff;
        
            border: 1px solid #b2ddff;
        }
        
        
        /* Neutral */
        .payroll-status-neutral {
            color: #475467;
        
            background: #f2f4f7;
        
            border: 1px solid #e4e7ec;
        }
        
        
        .payroll-text-muted {
            color: #98a2b3;
        
            font-size: 12px;
        }
        
        
        /* =========================================================
           LOCATION BUTTON
        ========================================================= */
        
        .payroll-location-btn {
            display: inline-flex;
        
            align-items: center;
        
            gap: 6px;
        
            padding: 6px 10px;
        
            background: #f2f4f7;
        
            color: #344054;
        
            border: 1px solid #e4e7ec;
            border-radius: 7px;
        
            font-size: 12px;
            font-weight: 500;
        
            text-decoration: none !important;
        
            transition: all 0.2s ease;
        }
        
        
        .payroll-location-btn:hover {
            background: #e4e7ec;
        
            color: #1d2939;
        
            transform: translateY(-1px);
        }
        
        
        /* =========================================================
           PHOTO
        ========================================================= */
        
        .payroll-photo {
            display: block;
        
            width: 55px;
            height: 55px;
        
            object-fit: cover;
        
            border-radius: 9px;
        
            border: 1px solid #e4e7ec;
        
            box-shadow:
                0 2px 6px rgba(16, 24, 40, 0.08);
        
            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease;
        }
        
        
        .payroll-photo:hover {
            transform: scale(1.06);
        
            box-shadow:
                0 5px 12px rgba(16, 24, 40, 0.13);
        }
        
        
        /* =========================================================
           HORIZONTAL SCROLLBAR
        ========================================================= */
        
        .payroll-table-scroll::-webkit-scrollbar {
            height: 9px;
        }
        
        
        .payroll-table-scroll::-webkit-scrollbar-track {
            background: #f2f4f7;
        }
        
        
        .payroll-table-scroll::-webkit-scrollbar-thumb {
            background: #c3c9d2;
        
            border-radius: 30px;
        
            border: 2px solid #f2f4f7;
        }
        
        
        .payroll-table-scroll::-webkit-scrollbar-thumb:hover {
            background: #98a2b3;
        }
        
        
        /* Firefox */
        .payroll-table-scroll {
            scrollbar-width: thin;
            scrollbar-color: #c3c9d2 #f2f4f7;
        }
        
        
        /* =========================================================
           DATATABLE GENERATED ROW
        ========================================================= */
        
        #tablePayroll_wrapper > .row:first-child,
        #tablePayroll_wrapper > .row:last-child {
            padding: 0 !important;
        }
        
        
        /* Karena pagination pakai Laravel */
        #tablePayroll_wrapper .dataTables_info,
        #tablePayroll_wrapper .dataTables_paginate {
            display: none !important;
        }
        
        
        /* =========================================================
           PAGINATION
        ========================================================= */
        
        .payroll-pagination {
            display: flex;
        
            align-items: center;
            justify-content: flex-end;
        
            width: 100%;
            min-height: 64px;
        
            padding: 14px 22px;
        
            background: #ffffff;
        
            border-top: 1px solid #edf0f4;
        
            box-sizing: border-box;
        }
        
        
        .payroll-pagination nav {
            width: 100%;
        }
        
        
        .payroll-pagination .pagination {
            display: flex;
        
            align-items: center;
            justify-content: flex-end;
        
            gap: 5px;
        
            margin: 0;
        }
        
        
        .payroll-pagination .page-link {
            display: flex;
        
            align-items: center;
            justify-content: center;
        
            min-width: 36px;
            height: 36px;
        
            padding: 5px 10px;
        
            background: #ffffff;
        
            color: #475467;
        
            border: 1px solid #e4e7ec !important;
            border-radius: 8px !important;
        
            font-size: 13px;
        
            box-shadow: none !important;
        
            transition: all 0.2s ease;
        }
        
        
        .payroll-pagination .page-link:hover {
            background: #f8fafc;
        
            color: #101828;
        
            border-color: #d0d5dd !important;
        }
        
        
        .payroll-pagination .page-item.active .page-link {
            background: #344054;
        
            color: #ffffff;
        
            border-color: #344054 !important;
        }
        
        
        /* =========================================================
           MOBILE
        ========================================================= */
        
        @media (max-width: 768px) {
        
            .payroll-card {
                border-radius: 14px;
            }
        
        
            .payroll-card-header {
                padding: 18px;
            }
        
        
            .payroll-card-title {
                font-size: 16px;
            }
        
        
            .payroll-card-subtitle {
                font-size: 12px;
            }
        
        
            .payroll-table-scroll #tablePayroll_wrapper {
                width: 1550px;
                min-width: 1550px;
            }
        
        
            #tablePayroll {
                width: 1550px !important;
                min-width: 1550px !important;
            }
        
        
            #tablePayroll thead th,
            #tablePayroll tbody td {
                padding: 13px 14px !important;
        
                font-size: 12px;
            }
        
        
            .payroll-pagination {
                padding: 12px 16px;
            }
        
        
            .payroll-pagination .pagination {
                justify-content: center;
            }
        
        }
    </style>
    <div class="transfer-content">
        <div class="tf-container">
    
            <div class="payroll-card">
    
                {{-- HEADER CARD --}}
                <div class="payroll-card-header">
                    <div>
                        <h5 class="payroll-card-title">
                            Riwayat Absensi
                        </h5>
    
                        <p class="payroll-card-subtitle">
                            Informasi kehadiran, jam masuk, dan jam pulang pegawai
                        </p>
                    </div>
                </div>
    
    
                {{-- TABLE SCROLL --}}
                <div class="payroll-table-scroll">
    
                    <table id="tablePayroll" class="table payroll-table">
    
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>Nama Pegawai</th>
                                <th>Shift</th>
                                <th>Tanggal</th>
                                <th>Jam Masuk</th>
                                <th>Telat</th>
                                <th>Lokasi Masuk</th>
                                <th>Foto Masuk</th>
                                <th>Jam Pulang</th>
                                <th>Pulang Cepat</th>
                                <th>Lokasi Pulang</th>
                                <th>Foto Pulang</th>
                                <th>Status Absen</th>
                            </tr>
                        </thead>
    
    
                        <tbody>
    
                            @foreach ($data_absen as $da)
    
                                <tr>
    
                                    {{-- NO --}}
                                    <td>
                                        {{ $loop->iteration }}
                                    </td>
    
    
                                    {{-- NAMA --}}
                                    <td>
                                        <span class="payroll-employee-name">
                                            {{ $da->User->name }}
                                        </span>
                                    </td>
    
    
                                    {{-- SHIFT --}}
                                    <td>
                                        <div class="payroll-shift">
                                            <strong>
                                                {{ $da->Shift->nama_shift }}
                                            </strong>
    
                                            <small>
                                                {{ $da->Shift->jam_masuk }}
                                                -
                                                {{ $da->Shift->jam_keluar }}
                                            </small>
                                        </div>
                                    </td>
    
    
                                    {{-- TANGGAL --}}
                                    <td>
                                        {{ $da->tanggal }}
                                    </td>
    
    
                                    {{-- JAM MASUK --}}
                                    <td>
    
                                        @if($da->status_absen == 'Libur')
    
                                            <span class="payroll-text-muted">
                                                Libur
                                            </span>
    
                                        @elseif($da->status_absen == 'Cuti')
    
                                            <span class="payroll-status payroll-status-info">
                                                Sedang Cuti
                                            </span>
    
                                        @elseif($da->jam_absen == null)
    
                                            <span class="payroll-status payroll-status-warning">
                                                Belum Absen
                                            </span>
    
                                        @else
    
                                            <span class="payroll-time">
                                                {{ $da->jam_absen }}
                                            </span>
    
                                        @endif
    
                                    </td>
    
    
                                    {{-- TELAT --}}
                                    <td>
    
                                        @if($da->status_absen == 'Libur')
    
                                            <span class="payroll-text-muted">
                                                Libur
                                            </span>
    
                                        @elseif($da->status_absen == 'Cuti')
    
                                            <span class="payroll-status payroll-status-info">
                                                Sedang Cuti
                                            </span>
    
                                        @elseif($da->status_absen == 'Izin Telat')
    
                                            <span class="payroll-status payroll-status-warning">
                                                Izin Telat
                                            </span>
    
                                        @elseif($da->jam_absen == null)
    
                                            <span class="payroll-status payroll-status-warning">
                                                Belum Absen
                                            </span>
    
                                        @else
    
                                            @php
                                                $telat = $da->telat;
    
                                                $jam = floor($telat / 3600);
    
                                                $menit = floor(
                                                    ($telat % 3600) / 60
                                                );
                                            @endphp
    
    
                                            @if($jam <= 0 && $menit <= 0)
    
                                                <span class="payroll-status payroll-status-success">
                                                    Tepat Waktu
                                                </span>
    
                                            @else
    
                                                <span class="payroll-status payroll-status-danger">
                                                    {{ $jam }} Jam {{ $menit }} Menit
                                                </span>
    
                                            @endif
    
                                        @endif
    
                                    </td>
    
    
                                    {{-- LOKASI MASUK --}}
                                    <td>
    
                                        @if($da->status_absen == 'Libur')
    
                                            <span class="payroll-text-muted">
                                                Libur
                                            </span>
    
                                        @elseif($da->status_absen == 'Cuti')
    
                                            <span class="payroll-status payroll-status-info">
                                                Sedang Cuti
                                            </span>
    
                                        @elseif($da->jam_absen == null)
    
                                            <span class="payroll-status payroll-status-warning">
                                                Belum Absen
                                            </span>
    
                                        @else
    
                                            <a
                                                href="{{ url('/maps/'.$da->lat_absen.'/'.$da->long_absen.'/'.$da->user_id) }}"
                                                class="payroll-location-btn"
                                                target="_blank"
                                            >
                                                <i class="fas fa-map-marker-alt"></i>
                                                Lihat
                                            </a>
    
                                        @endif
    
                                    </td>
    
    
                                    {{-- FOTO MASUK --}}
                                    <td>
    
                                        @if($da->status_absen == 'Libur')
    
                                            <span class="payroll-text-muted">
                                                Libur
                                            </span>
    
                                        @elseif($da->status_absen == 'Cuti')
    
                                            <span class="payroll-status payroll-status-info">
                                                Sedang Cuti
                                            </span>
    
                                        @elseif($da->jam_absen == null)
    
                                            <span class="payroll-status payroll-status-warning">
                                                Belum Absen
                                            </span>
    
                                        @else
    
                                            <a
                                                href="{{ url('storage/' . $da->foto_jam_absen) }}"
                                                target="_blank"
                                            >
                                                <img
                                                    src="{{ url('storage/' . $da->foto_jam_absen) }}"
                                                    class="payroll-photo"
                                                    alt="Foto Masuk"
                                                >
                                            </a>
    
                                        @endif
    
                                    </td>
    
    
                                    {{-- JAM PULANG --}}
                                    <td>
    
                                        @if($da->status_absen == 'Libur')
    
                                            <span class="payroll-text-muted">
                                                Libur
                                            </span>
    
                                        @elseif($da->status_absen == 'Cuti')
    
                                            <span class="payroll-status payroll-status-info">
                                                Sedang Cuti
                                            </span>
    
                                        @elseif($da->jam_absen == null)
    
                                            <span class="payroll-status payroll-status-warning">
                                                Belum Absen
                                            </span>
    
                                        @elseif($da->jam_pulang == null)
    
                                            <span class="payroll-status payroll-status-warning">
                                                Belum Pulang
                                            </span>
    
                                        @else
    
                                            <span class="payroll-time">
                                                {{ $da->jam_pulang }}
                                            </span>
    
                                        @endif
    
                                    </td>
    
    
                                    {{-- PULANG CEPAT --}}
                                    <td>
    
                                        @if($da->status_absen == 'Libur')
    
                                            <span class="payroll-text-muted">
                                                Libur
                                            </span>
    
                                        @elseif($da->status_absen == 'Cuti')
    
                                            <span class="payroll-status payroll-status-info">
                                                Sedang Cuti
                                            </span>
    
                                        @elseif($da->status_absen == 'Izin Pulang Cepat')
    
                                            <span class="payroll-status payroll-status-warning">
                                                Izin Pulang Cepat
                                            </span>
    
                                        @elseif($da->jam_absen == null)
    
                                            <span class="payroll-status payroll-status-warning">
                                                Belum Absen
                                            </span>
    
                                        @elseif($da->jam_pulang == null)
    
                                            <span class="payroll-status payroll-status-warning">
                                                Belum Pulang
                                            </span>
    
                                        @else
    
                                            @php
                                                $pulangCepat = $da->pulang_cepat;
    
                                                $jamPulangCepat =
                                                    floor($pulangCepat / 3600);
    
                                                $menitPulangCepat =
                                                    floor(
                                                        ($pulangCepat % 3600) / 60
                                                    );
                                            @endphp
    
    
                                            @if(
                                                $jamPulangCepat <= 0 &&
                                                $menitPulangCepat <= 0
                                            )
    
                                                <span class="payroll-status payroll-status-success">
                                                    Sesuai Jadwal
                                                </span>
    
                                            @else
    
                                                <span class="payroll-status payroll-status-danger">
                                                    {{ $jamPulangCepat }}
                                                    Jam
                                                    {{ $menitPulangCepat }}
                                                    Menit
                                                </span>
    
                                            @endif
    
                                        @endif
    
                                    </td>
    
    
                                    {{-- LOKASI PULANG --}}
                                    <td>
    
                                        @if($da->status_absen == 'Libur')
    
                                            <span class="payroll-text-muted">
                                                Libur
                                            </span>
    
                                        @elseif($da->status_absen == 'Cuti')
    
                                            <span class="payroll-status payroll-status-info">
                                                Sedang Cuti
                                            </span>
    
                                        @elseif($da->jam_absen == null)
    
                                            <span class="payroll-status payroll-status-warning">
                                                Belum Absen
                                            </span>
    
                                        @elseif($da->jam_pulang == null)
    
                                            <span class="payroll-status payroll-status-warning">
                                                Belum Pulang
                                            </span>
    
                                        @else
    
                                            <a
                                                href="{{ url('/maps/'.$da->lat_pulang.'/'.$da->long_pulang.'/'.$da->user_id) }}"
                                                class="payroll-location-btn"
                                                target="_blank"
                                            >
                                                <i class="fas fa-map-marker-alt"></i>
                                                Lihat
                                            </a>
    
                                        @endif
    
                                    </td>
    
    
                                    {{-- FOTO PULANG --}}
                                    <td>
    
                                        @if($da->status_absen == 'Libur')
    
                                            <span class="payroll-text-muted">
                                                Libur
                                            </span>
    
                                        @elseif($da->status_absen == 'Cuti')
    
                                            <span class="payroll-status payroll-status-info">
                                                Sedang Cuti
                                            </span>
    
                                        @elseif($da->jam_absen == null)
    
                                            <span class="payroll-status payroll-status-warning">
                                                Belum Absen
                                            </span>
    
                                        @elseif($da->jam_pulang == null)
    
                                            <span class="payroll-status payroll-status-warning">
                                                Belum Pulang
                                            </span>
    
                                        @else
    
                                            <a
                                                href="{{ url('storage/' . $da->foto_jam_pulang) }}"
                                                target="_blank"
                                            >
                                                <img
                                                    src="{{ url('storage/' . $da->foto_jam_pulang) }}"
                                                    class="payroll-photo"
                                                    alt="Foto Pulang"
                                                >
                                            </a>
    
                                        @endif
    
                                    </td>
    
    
                                    {{-- STATUS ABSEN --}}
                                    <td>
    
                                        @if($da->status_absen == 'Masuk')
    
                                            <span class="payroll-status payroll-status-success">
                                                {{ $da->status_absen }}
                                            </span>
    
                                        @elseif($da->status_absen == 'Libur')
    
                                            <span class="payroll-status payroll-status-neutral">
                                                {{ $da->status_absen }}
                                            </span>
    
                                        @elseif($da->status_absen == 'Cuti')
    
                                            <span class="payroll-status payroll-status-info">
                                                {{ $da->status_absen }}
                                            </span>
    
                                        @elseif(
                                            $da->status_absen == 'Izin Telat' ||
                                            $da->status_absen == 'Izin Pulang Cepat'
                                        )
    
                                            <span class="payroll-status payroll-status-warning">
                                                {{ $da->status_absen }}
                                            </span>
    
                                        @else
    
                                            <span class="payroll-status payroll-status-neutral">
                                                {{ $da->status_absen }}
                                            </span>
    
                                        @endif
    
                                    </td>
    
                                </tr>
    
                            @endforeach
    
                        </tbody>
    
                    </table>
    
                </div>
    
    
                {{-- PAGINATION --}}
                <div class="payroll-pagination">
                    {{ $data_absen->links() }}
                </div>
    
            </div>
    
        </div>
    </div>
    <br>
    <br>
    <br>
    <br>
@endsection