@extends('layouts.app')
@section('title', 'Data Customer')

@section('breadcrumb')
    <ul class="breadcrumb">
        <li>
            <p>DASHBOARD</p>
        </li>
        <li><a href="#" class="active">Data Customer</a> </li>
    </ul>
@endsection


@section('title-section', 'Data Customer')

@section('content')
    <div class="row-fluid">
        <div class="span12">
            <div class="grid simple ">
                <div class="grid-body ">
                    <table class="table table-hover table-condensed" id="example6">
                        <thead>
                            <tr>
                                <th style="width:15%">Nama Customer</th>
                                <th style="width:15%" data-hide="phone,tablet">Jenis Layanan</th>
                                <th style="width:20%" data-hide="phone,tablet">Nama Projek</th>
                                <th style="width:10%">Status</th>
                                <th style="width:10%" data-hide="phone,tablet">Progress</th>
                                <th style="width:10%">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($data as $row)
                                <tr>
                                    <td class="v-align-middle">{{ $row['nama_customer'] }}</td>
                                    <td class="v-align-middle"><span class="muted">{{ $row['layanan'] }}</span></td>
                                    <td class="v-align-middle"><span class="muted">{{ $row['nama_project'] }}</span></td>
                                    <td>
                                        @if ($row['status'] == 'SELESAI')
                                            <span class="label label-success">{{ $row['status'] }}</span>
                                        @endif
                                        @if ($row['status'] == 'PENDING')
                                            <span class="label label-warning">{{ $row['status'] }}</span>
                                        @endif
                                        @if ($row['status'] == 'PROSES')
                                            <span class="label label-primary">{{ $row['status'] }}</span>
                                        @endif
                                        @if ($row['status'] == 'BATAL')
                                            <span class="label label-danger">{{ $row['status'] }}</span>
                                        @endif
                                    </td>
                                    <td class="v-align-middle">
                                        @if ($row['status'] == 'BATAL')
                                            <div class="progress ">
                                                <div data-percentage="{{ $row['progress'] }}%"
                                                    class="progress-bar progress-bar-danger animate-progress-bar"></div>
                                            </div>
                                        @else
                                            @if ($row['progress'] == 0)
                                                <div class="progress ">
                                                    <div data-percentage="0%"
                                                        class="progress-bar progress-bar-success animate-progress-bar">
                                                    </div>
                                                </div>
                                            @endif
                                            @if ($row['progress'] > 0 && $row['progress'] < 100)
                                                <div class="progress ">
                                                    <div data-percentage="{{ $row['progress'] }}%"
                                                        class="progress-bar progress-bar-info animate-progress-bar"></div>
                                                </div>
                                            @endif
                                            @if ($row['progress'] == 100)
                                                <div class="progress ">
                                                    <div data-percentage="100%"
                                                        class="progress-bar progress-bar-success animate-progress-bar">
                                                    </div>
                                                </div>
                                            @endif
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{ route('data-customer.show', $row['id']) }}"
                                            class="btn btn-primary">Detail</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('addon-script')
    <script>
        var value = sessionStorage.getItem("search-customer");
        var tableElement = $("#example6").DataTable();
        if (value) {
            $("#example6_filter label input").val(value).trigger("keyup");
            sessionStorage.removeItem("search-customer");
        }
    </script>
@endpush