@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('body_content')

    <style type="text/css">
        .hide-content {
            display: none;
        }

        .bold {
            font-weight: bold;
        }

        .pt-8 {
            padding-top: 8px;
        }

        .img_table {
            height: 200px;
            border-radius: 5px;
        }

        .img_modal {
            height: 400px;
            border-radius: 5px;
        }


        .modal-xl {
            width: 150%;
            max-width: 1800px;
        }
    </style>

    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')
            <div class="right_col" role="main">
                <div class="page-title">
                    <div class="title_left">
                        <h3>Customer Gadai Digital</h3>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <ol class="breadcrumb">
                            <li><a href="{{ route('dashboard') }}">Home</a></li>
                            <li class="active">Customer Gadai Digital</li>
                        </ol>
                    </div>
                </div>

                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Filter</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <form id="form_filter" class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 control-label">Nama Customer :</label>
                                    <div class="col-xs-6 col-sm-4">
                                        <input type="text" name="customer" class="form-control"
                                            placeholder="Nama Atau Nomor Handphone" value="{{ request('customer') }}">
                                    </div>
                                </div>
                        
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-4 control-label">Tanggal Mulai :</label>
                                    <div class="col-xs-6 col-sm-4">
                                        <input id="date_start" name="date_start" type="date" class="form-control"
                                             placeholder="Date Start" value="{{ request('date_start') }}">
                                    </div>
                                </div>
                        
                                <div class="form-group text-center">
                                    <div class="col-xs-12">
                                        <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
                                        <button type="button" class="btn btn-warning" id="btn-reset"><i class="fa fa-refresh"></i> Reset</button>
                                    </div>
                                </div>
                            </form>
                        </div>                        
                    </div>
                </div>

                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <div class="row">
                                <div class="col-md-4">
                                    <h2>Completed Approval : {{ $cust_approved }}</h2>
                                </div>
                                <div class="col-md-4">
                                    <h2>Pending Approval : {{ $cust_pending_approval }}</h2>
                                </div>
                                <div class="col-md-4">
                                    <h2>Rejected : {{ $cust_rejected }}</h2>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        
                        <div class="x_content" style="zoom: 0.9;overflow: auto;">
                            {{-- style="zoom: 0.9; overflow: auto;" --}}
                            <table class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th class="text-center">No</th>
                                        <th class="text-center">Tanggal Upload</th>
                                        <th class="text-center">Nama</th>
                                        <th class="text-center">Kontak Kerabat</th>
                                        <th class="text-center">Ibu Kandung</th>
                                        <th class="text-center">Asal Barang</th>
                                        <th class="text-center">Tujuan Transaksi</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-center">Detail</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $no = 1;
                                    @endphp
                                    @foreach ($customer as $data)
                                        <tr>
                                            <td class="text-center">{{ $no++ }}</td>
                                            <td class="text-center">{{ $data->created_at }}</td>
                                            <td class="text-center">{{ $data->customer->name }}</td>
                                            <td class="text-center">{{ $data->phone_kerabat }}</td>
                                            <td class="text-center">{{ $data->nama_ibu_kandung }}</td>
                                            <td class="text-center">{{ $data->asal_barang }}</td>
                                            <td class="text-center">{{ $data->tujuan_transaksi }}</td>
                                            <td class="text-center">
                                                @if ($data->status == 1)
                                                    Approved
                                                @elseif( $data->status == 0)
                                                    Waiting Approval
                                                @else
                                                    Rejected
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-warning btn-xs btn-search"
                                                data-toggle="modal" data-target="#myModal{{ $data->id }}">
                                                <i class="fa fa-search"></i>
                                            </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            {{-- {{ $customer->links() }} --}}
                        </div>
                    </div>
                </div>
            </div>
            {{-- @include('includes.footer') --}}
        </div>
    </div>
    <script>
        document.getElementById('btn-reset').addEventListener('click', function () {
            const form = document.getElementById('form_filter');
            form.querySelectorAll('input').forEach(input => {
                input.value = '';
            });
        });
    </script>
    @include('pages.gadai_digital.customer_modal')