@extends('layouts.master')
@section('title', 'Customer List')

@section('page-header')
<header class="header bg-ui-general">
    <div class="header-info">
        <h1 class="header-title">
            <strong>Customers</strong>
        </h1>
    </div>

    <div class="header-action">
        <nav class="nav">
            <a class="nav-link active" href="{{ route('customer.index') }}">
                Customers
            </a>
            <a class="nav-link" href="{{ route('customer.create') }}">
                <i class="fa fa-plus"></i>
                New Customer
            </a>
        </nav>
    </div>
</header>
@endsection

@section('content')

<div class="col-12">

    <div class="card card-body mb-2">
        <form method="GET" action="{{ route('customer.index') }}" class="mb-4">
            <div class="form-row">
                <!-- Customer ID -->
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" name="account_no" placeholder="Customer ID"
                        value="{{ request('account_no') }}">
                </div>

                <!-- Name -->
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" name="name" placeholder="Customer Name"
                        value="{{ request('name') }}">
                </div>

                <!-- Mobile Number -->
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" name="mobile_no" placeholder="Mobile No"
                        value="{{ request('mobile_no') }}">
                </div>

                <!-- Gender -->
                <div class="form-group col-md-2">
                    <select name="gender" class="form-control" data-provide="selectpicker" data-live-search="true"
                        data-size="10">
                        <option value="">Select Gender</option>
                        <option value="male" {{ request('gender') == 'male' ? 'selected' : '' }}>Male</option>
                        <option value="female" {{ request('gender') == 'female' ? 'selected' : '' }}>Female</option>
                        <option value="other" {{ request('gender') == 'other' ? 'selected' : '' }}>Other</option>
                    </select>
                </div>

                <!-- Filter Buttons -->
                <div class="form-group col-md-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-sliders"></i> Filter
                    </button>
                    <a href="{{ route('customer.index') }}" class="btn btn-info">Reset</a>
                    <a href="" class="btn btn-primary" onclick="window.print()">Print</a>
                </div>
            </div>
        </form>
    </div>
    
    <div class="card">

        <h4 class="card-title"><strong>Customers</strong></h4>

        <div class="card-body card-body-soft">

            @if($customers->count() > 0)

            <div class="table-responsive-sm table-bordered">
                <table class="table table-soft">
                    <thead>
                        <tr class="bg-primary">
                            <th>#</th>
                            <th>Name</th>
                            <th>Image</th>
                            <!-- <th>Father</th>
                                   <th>Mother</th> -->
                            <th>Mobile No</th>
                            <!-- <th>Address</th> -->
                            <th>Account No</th>
                            <th>Gender</th>
                            <th>Join Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($customers as $key => $item)
                        <tr>
                            <td>{{ ++$key }}</td>
                            <td>{{ $item->name }}</td>
                            <td>
                                @if($item->image)
                                <img src="{{ asset($item->image) }}" width="60" class="img-thumbnail">
                                @else
                                <span>-</span>
                                @endif
                            </td>
                            <!-- <td>{{ $item->father_name ?? '-' }}</td>
                                   <td>{{ $item->mother_name ?? '-' }}</td> -->
                            <td>{{ $item->mobile_no ?? '-' }}</td>
                            <!-- <td>{{ $item->address ?? '-' }}</td> -->
                            <td>{{ $item->account_no ?? '-' }}</td>
                            <td>{{ ucfirst($item->gender) }}</td>
                            <td>{{ $item->join_date ?? '-' }}</td>
                            <td>
                                 @can('customer-profile')
                                <a href="{{ route('customer.profile', $item->id) }}" class="btn btn-primary btn-xs"
                                    data-provide="tooltip" data-tooltip-color="primary" title="View Profile">
                                    <i class="fa fa-eye"></i>
                                </a>
                                @endcan
                                @can('edit-customer')
                                <a href="{{ route('customer.edit', $item->id) }}" data-provide="tooltip"
                                    data-tooltip-color="info" title="Edit Customer" class="btn btn-info btn-xs">
                                    <i class="fa fa-edit"></i>
                                </a>
                                @endcan
                                 @can('delete-customer')
                                <a href="{{ route('customer.destroy',$item->id) }}" data-provide="tooltip"
                                    data-tooltip-color="danger" title="Delete Customer"
                                    class="btn btn-danger btn-xs delete">
                                    <i class="fa fa-trash"></i>
                                </a>
                                @endcan
                            </td>
                        </tr>
                        @endforeach
                    </tbody>

                </table>

                {{ $customers->links() }}
            </div>

            @else
            <div class="alert alert-danger" role="alert">
                <strong>You have no Customers</strong>
            </div>
            @endif

        </div>
    </div>
</div>

@endsection

@section('styles')
<style>
    .table tr td {
        vertical-align: middle;
        padding: 5px;
        text-align: center;
        font-weight: 500;
    }

    .table tr th {
        text-align: center;
    }

</style>
@endsection

@section('scripts')
@include('includes.delete-alert')
@endsection
