@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
    mealcards List
    @parent
@stop

<style>
    /* Tab Styling - Modern Flat Look */
    .nav-tabs {
        border-bottom: 2px solid #eee;
        background: #f8f9fa;
        border-radius: 8px 8px 0 0;
        padding: 10px 10px 0 10px;
    }

    .nav-tabs > li > a {
        border: none !important;
        color: #666 !important;
        font-weight: 600 !important;
        padding: 12px 25px;
        transition: all 0.3s ease;
        border-radius: 5px 5px 0 0 !important;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:focus,
    .nav-tabs > li.active > a:hover {
        background-color: #fff !important;
        color: #428BCA !important; /* Professional Blue */
        border-bottom: 3px solid #428BCA !important;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
    }

    .nav-tabs > li > a:hover {
        background-color: #eef2f7 !important;
        color: #333 !important;
    }

    /* Content Area Polish */
    .tab-content {
        background: #fff;
        padding: 20px;
        border: 1px solid #eee;
        border-top: none;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    }

    /* Table Headers */
    .table thead tr {
        background-color: #428BCA !important;
        color: #ffffff !important;
    }

    .table thead tr th {
        border: none !important;
        padding: 12px !important;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Status Icons - Clean Colors */
    .glyphicon-ok {
        color: #27ae60; /* Success Green */
        background: #eafaf1;
        padding: 5px;
        border-radius: 50%;
        font-size: 12px;
    }

    .glyphicon-remove {
        color: #e74c3c; /* Danger Red */
        background: #fdedec;
        padding: 5px;
        border-radius: 50%;
        font-size: 12px;
    }

    /* Summary Labels (Top Counters) */
    .summary-box {
        background: #f1f4f9;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
        display: inline-block;
        width: 100%;
        border-left: 5px solid #428BCA;
    }

    /* Search Box */
    .textbox, #cafeSearch {
        border-radius: 20px;
        border: 1px solid #ccc;
        padding: 8px 15px;
        transition: border 0.3s;
    }

    .textbox:focus {
        border-color: #428BCA;
        outline: none;
        box-shadow: 0 0 5px rgba(66,139,202,0.3);
    }
</style>

<style>
/* ===============================
GLOBAL STYLING
=================================*/
body {
background-color: #f4f6f9;
font-family: 'Segoe UI', Tahoma, sans-serif;
}

.content-header h1 {
font-weight: 600;
color: #2c3e50;
}

.panel {
border-radius: 10px;
border: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.panel-heading {
background: linear-gradient(135deg, #428BCA, #2c6faa);
border-radius: 10px 10px 0 0 !important;
padding: 15px;
}

.panel-title {
font-size: 16px;
font-weight: 600;
}

/* ===============================
NAV TABS
=================================*/
.nav-tabs {
border-bottom: none;
background: #ffffff;
padding: 10px;
border-radius: 10px 10px 0 0;
}

.nav-tabs > li {
margin-right: 5px;
}

.nav-tabs > li > a {
border: none !important;
color: #555 !important;
font-weight: 600 !important;
padding: 10px 20px;
border-radius: 8px !important;
transition: all 0.3s ease;
}

.nav-tabs > li.active > a {
background-color: #428BCA !important;
color: #fff !important;
}

.nav-tabs > li > a:hover {
background-color: #eaf2fb !important;
color: #2c6faa !important;
}

/* ===============================
TAB CONTENT
=================================*/
.tab-content {
background: #ffffff;
padding: 25px;
border-radius: 0 0 10px 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* ===============================
TABLE DESIGN
=================================*/
.table {
border-radius: 8px;
overflow: hidden;
background: #ffffff;
}

.table thead {
background-color: #428BCA;
color: #ffffff;
}

.table thead th {
border: none !important;
padding: 12px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.table tbody tr {
transition: all 0.2s ease-in-out;
}

.table tbody tr:hover {
background-color: #f2f8ff;
}

.table td {
padding: 10px !important;
vertical-align: middle !important;
}

/* ===============================
BUTTONS
=================================*/
.btn {
border-radius: 25px;
padding: 6px 18px;
font-weight: 600;
transition: all 0.3s ease;
}

.btn-success {
background-color: #27ae60;
border: none;
}

.btn-success:hover {
background-color: #219150;
}

.btn-default {
border-radius: 20px;
}

/* ===============================
SEARCH INPUTS
=================================*/
.textbox,
#cafeSearch,
#gate {
border-radius: 25px;
border: 1px solid #dcdcdc;
padding: 8px 15px;
width: 250px;
transition: 0.3s;
}

.textbox:focus,
#cafeSearch:focus,
#gate:focus {
border-color: #428BCA;
box-shadow: 0 0 6px rgba(66,139,202,0.3);
outline: none;
}

/* ===============================
STATUS ICONS
=================================*/
.glyphicon-ok {
color: #27ae60;
background: #eafaf1;
padding: 6px;
border-radius: 50%;
font-size: 12px;
}

.glyphicon-remove {
color: #e74c3c;
background: #fdecea;
padding: 6px;
border-radius: 50%;
font-size: 12px;
}

/* ===============================
CHECKBOX STYLE
=================================*/
input[type="checkbox"] {
transform: scale(1.1);
cursor: pointer;
}

/* ===============================
SUMMARY TEXT
=================================*/
h3 {
font-weight: 600;
color: #2c3e50;
}

/* ===============================
PRINT HEADER STYLE
=================================*/
@media print {
body {
background: #fff;
}
.nav-tabs,
.btn,
.textbox,
#cafeSearch {
display: none;
}
}
</style>
<script src="js/argiepolicarpio.js" type="text/javascript" charset="utf-8"></script>
@section('content')
    <section class="content-header">
        <h1><b>Student Mealcards</b></h1>
        <ol class="breadcrumb">
            <li>
                <a href="{{ route('dashboard') }}"> <i class="livicon" data-name="home" data-size="16" data-color="#000"></i>
                    Dashboard
                </a>
            </li>

            <li>mealcards</li>
            <li class="active">mealcards </li>

            <a href="assigngate " class="btn btn-sm btn-default"><span class="glyphicon glyphicon-upload"></span> @lang('Assign Gate')</a>
            



        </ol>
    </section>
    <div class="panel panel-primary ">
        <div class="panel-heading clearfix">
            <h4 class="panel-title"> <i class="livicon" data-name="list-ul" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>
                Onecard system
            </h4>
        </div>
        <div class="panel-body">
            {{--<div class="panel-body">--}}
                {{--<div class="bs-example">--}}
                    {{--<ul class="nav nav-tabs" style="margin-bottom: 15px;">--}}

                    {{--</ul>--}}
                    {{--<div id="myTabContent" class="tab-content">--}}
                        {{--<div class="tab-pane fade active in" id="campus">--}}
                        {{--</div>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
            </div>

            <ul class="nav nav-tabs" role="tablist" >
                <li role="tabpanel">
                    <a href="#activatemeal" aria-controls="activatemeal" role="tab" data-toggle="tab">
                        <font size="3" color="blue"><b>Activate Meal</b></font>
                    </a>
                </li>

                {{--<li role="tabpanel" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab"><font size="3" color="blue"><b>Student used </b></font></a></li>--}}
                <li role="tabpanel"><a href="#time" aria-controls="time" role="tab" data-toggle="tab"><font size="3"color="blue"><b>Today Used</b></font></a></li>
                <li role="tabpanel"><a href="#noncafe" aria-controls="noncafe" role="tab" data-toggle="tab"><font size="3"color="blue"><b>Noncafe</b></font></a></li>
                <li role="tabpanel"><a href="#cafe" aria-controls="cafe" role="tab" data-toggle="tab"><font size="3"color="blue"><b>Cafe Students</b></font></a></li>
                <li role="tabpanel">
                    <a href="#disablebreakfast" aria-controls="disablebreakfast" role="tab" data-toggle="tab">
                        <font size="3" color="blue"><b>Disable Meal</b></font>
                    </a>
                </li>
                <li role="tabpanel">
                    <a href="#disablebreakfast" aria-controls="disablebreakfast" role="tab" data-toggle="tab">
                        <font size="3" color="blue"><b>Lock Meal</b></font>
                    </a>
                </li>