@extends('admin.layout.app')
@section('content')
    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid pt-3">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card p-3">
                            <div class="row">
                                <div class="col-md-12">
                                    <img src="{{ $customer->profile_url }}" class="img-circle"
                                        width="150" height="150"> <br>
                                    @if($customer->document_url)
                                    <button type="button" data-target="#modal-doc{{ $customer->id }}"
                                        data-toggle="modal" class="btn btn-sm btn-success">
                                        <i class="fas fa-eye"></i> View Document
                                    </button>
                                    @endif
                                    
                                    <div id="modal-doc{{ $customer->id }}" class="modal fade" role="dialog">
                                        <div class="modal-dialog modal-md">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h4 class="modal-title">Document Cutomer</h4>
                                                    <button type="button" class="close"
                                                        data-dismiss="modal">&times;</button>
                                                </div>
                                                <div class="modal-body">
                                                    <img src="{{ $customer->document_url }}" class="w-100">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="d-flex justify-content-between">
                                        <label class="pr-2">Customer Balance Status:</label>
                                        <span class="">{{$customer->balance ?? ''}}</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <label class="pr-2">Opening Balance:</label>
                                        <span>{{$customer->opening ?? ''}}</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <label class="pr-2">Customer Name:</label>
                                        <span class="">{{$customer->name ?? ''}}</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <label class="pr-2">Contact:</label>
                                        <span>{{$customer->phone ?? ''}}</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <label class="pr-2">Address:</label>
                                        <span>{{$customer->address ?? ''}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="col-md-12 mt-2">
                                <h5><b> Documents</b></h5>
                                <div class="row">
                                    @foreach($customer->getMedia('documents') as $doc)
                                        <div class="col-md-4 mb-2">
                                            <div class="card p-2 text-center">
                                                <img src="{{ $doc->getUrl() }}"
                                                    class="img-fluid rounded"
                                                    style="height:120px; object-fit:cover; cursor:pointer;"
                                                    data-toggle="modal"
                                                    data-target="#docModal{{ $doc->id }}">
                                            </div>
                                        </div>
                                        <div class="modal fade" id="docModal{{ $doc->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                                <div class="modal-content">
    
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">Document Preview</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
    
                                                    <div class="modal-body text-center">
                                                        <img src="{{ $doc->getUrl() }}" class="img-fluid rounded">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h2 class="card-title"><i class="fas fa-chart-pie"></i> Customer Sales</h2>
                            </div>
                            <div class="card-body pt-0">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead class="table-borderless">
                                            <tr>
                                                <th>Sr#</th>
                                                <th>Date</th>
                                                <th>Items</th>
                                                <th>Total</th>
                                                <th>Paid</th>
                                                <th>Mop</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($sales as $key => $sale)
                                                <tr>
                                                    <td>{{$key+1}}</td>
                                                    <td> {{ $sale->date}} </td>
                                                    <td>
                                                        @foreach($sale->items as $pi)
                                                            <button class="btn btn-xs btn-info">
                                                                {{ $pi->product?->name }}
                                                                {{ $pi->pack_quantity > 0 ? ' - '.$pi->pack_quantity : '' }}
                                                                {{ $pi->unit_quantity > 0 ? ' - '.$pi->unit_quantity : '' }}
                                                            </button>
                                                        @endforeach
                                                    </td>
                                                    <td> {{ $sale->total}} </td>
                                                    <td> {{ $sale->paid}} </td>
                                                    <td> {{ $sale->mop}} </td>
                                                    <td>
                                                        @can('sales.detail')
                                                        <a href="{{route('admin.sale.details' ,$sale)}}" class="btn btn-success btn-xs">
                                                            <i class="fas fa-info-circle"></i> view
                                                        </a>
                                                        @endcan
                                                        @can('sales.edit')
                                                        <a href="{{route('admin.sale.edit',$sale)}}" class="btn btn-xs btn-secondary"><i class="fas fa-edit"></i>Edit</a>
                                                        @endcan

                                                        {{-- @can('sales.delete')
                                                        <button type="button" data-target="#modal-del-{{ $sale->id }}"
                                                            data-toggle="modal" class="btn btn-xs btn-danger">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                        @endcan
                                                        <div id="modal-del-{{ $sale->id}}" class="modal fade" role="dialog">
                                                            <div class="modal-dialog modal-md">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h4 class="modal-title">Delete Purchase</h4>
                                                                        <button type="button" class="close"
                                                                            data-dismiss="modal">&times;</button>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        <p>Do you really wish to delete this Purchase?</p>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <form action="{{route('admin.sale.delete' , $sale)}}"
                                                                            method="post">
                                                                            @csrf
                                                                            @method('delete')
                                                                            <button type="button" class="btn btn-sm btn-default"
                                                                                data-dismiss="modal">No</button>
                                                                            <button type="submit"
                                                                                class="btn btn-sm btn-danger">Yes</button>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div> --}}
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="3" class="text-center">No records found</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection