@extends('admin.layouts.adminmaster')

@section('title', 'All Client')

@section('content')

    
<div class="card mb-5">
    <div class="position-relative">
        <div class="card-header card-header d-flex justify-content-between">
            <a href="{{route('admin.new_client')}}" class="btn btn-primary w-auto ml-auto"> Add Client</a>
        </div>
        <div class="card-body">

            <form method="get" id="search_form" action="{{ route('admin.clients') }}" enctype="multipart/form-data" data-parsley-validate="true"> 
                <div class="row align-items-end">
                    <div class="col-lg-4 mb-3">
                        <label class="form-label" for="">Reference</label>
                        <div class="position-relative">
                            <input type="text" class="form-control" id="reference" name="reference" value="{{ $reference }}" placeholder="Enter Reference" />
                        </div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="form-label" for="">Forename</label>
                        <div class="position-relative">
                            <input type="text" class="form-control" id="forename" name="forename" value="{{ $forename }}" placeholder="Enter Forename" />
                        </div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="form-label" for="">Surname</label>
                        <div class="position-relative">
                            <input type="text" class="form-control" id="surname" name="surname" value="{{ $surname }}" placeholder="Enter Surname" />
                        </div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="form-label" for="">Mobile Number</label>
                        <div class="position-relative">
                            <input type="number" class="form-control" id="phone" name="phone" value="{{ $phone }}" placeholder="Enter Mobile Number" />
                        </div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="form-label" for="">Postcode</label>
                        <div class="position-relative">
                            <input type="number" class="form-control" id="postcode" name="postcode" value="{{ $postcode }}" placeholder="Enter Postcode" />
                        </div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <label class="form-label" for="">Card Last 4 digit</label>
                        <div class="position-relative">
                            <input type="number" class="form-control" id="cardnumber" name="cardnumber" value="{{ $cardnumber }}" placeholder="Enter Card Last 4 digit" />
                        </div>
                    </div>
                    <div class="col-lg-4 mb-3">
                        <div class="d-flex align-items-center gap-2">
                            <button class="btn btn-primary" type="submit">Search</button>
                            <button class="btn btn-danger" id="reset" >Clear</button>
                            <button type="submit" class="btn btn-info" id="export" name="export" value="1" >Export</button> 
                        </div>
                    </div>
                </div>
            </form>
            <div class="table-wrap" id="tableDiv">
                <div class="table-responsive">
                    <table id="base-style" class="table table-striped table-bordered align-middle w-100">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Reference</th>
                                <th>Client Name</th>
                                <th>Mobile</th>
                                <th>Post Code</th>
                                <th>Current Card</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach($clients as $key => $client)

                            <tr>
                                <td>{{ $key+1 }}</td>
                                <td>{{ $client->reference }}</td>
                                <td>{{ $client->forename }}</td>
                                <td>{{ $client->phone }}</td>
                                <td>{{ $client->postcode }}</td>
                                <td>{{ $client->card->first()->number ?? null }}</td>
                                 
                                <td>
                                    <div class="dropdown mt-4 mt-sm-0">
                                        <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="true">
                                            <i class="bx bx-dots-horizontal-rounded"></i>
                                        </button>
                                        <div class="dropdown-menu" data-popper-placement="bottom-end">
                                          
                                            <a class="dropdown-item cancel-link" href="{{ url('admin/client_edit/' . $client->id ) }}">Edit</a>

                                             <a class="dropdown-item cancel-link" href="{{ route('admin.del_client' , $client->id) }}" onclick="return confirm('Are you sure you want to delete this Client?');" >Delete</a> 
                                            
                                            <a class="dropdown-item cancel-link" href="{{ url('admin/client_view/' . $client->id ) }}">View</a>
                                             <a class="dropdown-item cancel-link" href="{{ route('admin.appliance' , $client->id) }}">Appliance</a>
 
                                        </div>
                                    </div>
                                </td>
                            </tr>

                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
             

@endsection

@section('specificscripts')
<script>
    $("#base-style").DataTable();
</script>


 <script type="text/javascript">
        $(document).ready(function() {

        // Reset button click event
        $('#reset').on('click', function() { 
            $('#reference').val(''); 
            $('#forename').val('');
            $('#surname').val('');
            $('#phone').val('');
            $('#postcode').val('');
            $('#cardnumber').val(''); 
        });

    });

</script>
@stop