@extends('layouts.master')

@section('title', 'Device Stocks')

@section('content')

    <div class="page-heading">
        <section class="section">

            <div class="card">

                <div class="card-body">

                    <table class="table table-striped" id="devicestockTable">

                        <thead>

                            <tr>

                                <th>Serial Number</th>

                                <th>IMEI</th>

                                <th>Type</th>

                                <th>Model</th>

                                <th>SIM Card</th>

                                <th>Status</th>

                            </tr>

                        </thead>

                        <tbody>

                            @foreach ($devices as $device)
                                <tr>

                                    <td>
                                        {{ $device->serial_number }}
                                    </td>

                                    <td>
                                        {{ $device->imei }}
                                    </td>

                                    <td>
                                        {{ $device->device_type }}
                                    </td>

                                    <td>
                                        {{ $device->model_name }}
                                    </td>

                                    <td>
                                        {{ $device->sim_card_no }}
                                    </td>

                                    <td>

                                        @switch($device->status)
                                            @case('store_stock')
                                                <span class="badge bg-success">
                                                    STORE STOCK
                                                </span>
                                            @break

                                            @case('sales_stock')
                                                <span class="badge bg-primary">
                                                    SALES STOCK
                                                </span>
                                            @break

                                            @case('border_stock')
                                                <span class="badge bg-info">
                                                    BORDER STOCK
                                                </span>
                                            @break

                                            @case('leased')
                                                <span class="badge bg-dark">
                                                    LEASED
                                                </span>
                                            @break

                                            @case('pending')
                                                <span class="badge bg-warning">
                                                    RETURN PENDING
                                                </span>
                                            @break
                                        @endswitch

                                    </td>

                                </tr>
                            @endforeach

                        </tbody>

                    </table>

                </div>

            </div>

        </section>

    </div>

@endsection
@push('scripts')
    <script>
        $(document).ready(function() {

            $('#devicestockTable').DataTable({

                order: [
                    [1, 'desc']
                ],

                pageLength: 25,

                responsive: true,

                dom: 'Bfrtip',

                buttons: [

                    'copy',
                    'excel',
                    'csv',
                    'print'

                ]

            });

        });
    </script>
@endpush