@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="">
                                <div class="text-center">
                                    <img src="{{$sale->customer?->profile_url}}" class="img-circle"
                                    width="150" height="150">
                                </div>
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <label class="pr-2">Bill No:</label>
                                    <span class="">{{$sale->bill_no ?? ''}}</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <label class="pr-2">Customer Name:</label>
                                    <span class="">{{$sale->customer?->name ?? ''}}</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <label class="pr-2">Email:</label>
                                    <span>{{$sale->customer?->email ?? ''}}</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <label class="pr-2">CNIC:</label>
                                    <span>{{$sale->customer?->nic ?? ''}}</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <label class="pr-2">Phone:</label>
                                    <span>{{$sale->customer?->phone ?? ''}}</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <label class="pr-2">Address:</label>
                                    <span>{{$sale->customer?->address ?? ''}}</span>
                                </div>
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <label class="pr-2">Items :</label>
                                    @foreach($sale->items as $pi)
                                        <button class="btn btn-xs btn-info">
                                            {{ $pi->item?->name }} - {{ $pi->quantity }}
                                        </button>
                                    @endforeach
                                </div>
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <label class="pr-2">Type:</label>
                                    <span>{{ucfirst($sale->type) ?? ''}}</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <label class="pr-2">Total Amount:</label>
                                    <span>{{$sale->total ?? ''}}</span>
                                </div>
                            </div>
                        </div>  
                    </div>
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h2 class="card-title"><i class="fas fa-info-circle"></i> Payment Details</h2>
                                <div class="card-tools">
                                    @if($sale->type == 'installment')
                                    <a href="{{route('admin.sale.ledger', $sale)}}" class="btn btn-sm btn-warning"><i class="fas fa-stream"></i>Installment Plan</a>
                                    @endif
                                    <button type="button" data-target="#modal-add"
                                        data-toggle="modal" class="btn btn-sm btn-info">
                                        <i class="fas fa-plus-circle"></i> Add Payment
                                    </button>
                                    <div id="modal-add" class="modal fade" role="dialog">
                                        <div class="modal-dialog modal-md">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h4 class="modal-title">Add Payment</h4>
                                                    <button type="button" class="close"
                                                        data-dismiss="modal">&times;</button>
                                                </div>
                                                <form action="{{route('admin.sale.payment.store' ,$sale)}}" method="post" enctype="multipart/form-data">
                                                    @csrf
                                                    <div class="modal-body">
                                                        <div class="form-group">
                                                            <label for="type">Payment type</label>
                                                            <select id="type" name="type" class="form-control"
                                                                    data-placeholder="Select Payment Type">
                                                                @if($sale->type == 'installment')
                                                                    <option value="installment">Installment</option>
                                                                @else
                                                                    <option value="direct">Direct</option>
                                                                @endif
                                                            </select>
                                                            @error('type')
                                                            <span class="text-danger text-sm pull-right">{{$errors->first('type')}}</span>
                                                            @enderror
                                                        </div>
                                                    
                                                        <div class="form-group">
                                                            <label for="date">Date</label>
                                                            <input type="date" id="date" name="date" class="form-control"
                                                                    value="{{old('date')}}"
                                                                    placeholder="Enter Date">
                                                            @error('date')
                                                            <span class="text-danger text-sm pull-right">{{$errors->first('date')}}</span>
                                                            @enderror
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="amount">Amount</label>
                                                            <input type="number" id="amount" name="amount" class="form-control"
                                                                    value="{{old('amount')}}"
                                                                    placeholder="Enter Amount">
                                                            @error('amount')
                                                            <span class="text-danger text-sm pull-right">{{$errors->first('amount')}}</span>
                                                            @enderror
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="mop">MOP</label>
                                                            <input type="text" id="mop" name="mop" class="form-control"
                                                                   value="{{old('mop')}}"
                                                                   placeholder="Enter MOP">
                                                            @error('mop')
                                                            <span class="text-danger text-sm pull-right">{{$errors->first('mop')}}</span>
                                                            @enderror
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="note">Note</label>
                                                            <input type="text" id="note" name="note" class="form-control"
                                                                    value="{{old('note')}}"
                                                                    placeholder="Enter Note">
                                                            @error('note')
                                                            <span class="text-danger text-sm pull-right">{{$errors->first('note')}}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="submit" class="btn btn-sm btn-info">Save Record</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </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>Type</th>
                                                <th>Amount</th>
                                                <th>MOP</th>
                                                <th>Note</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($ledgers as $key => $ledger)
                                                <tr>
                                                    <td>{{$key+1}}</td>
                                                    <td>{{$ledger->date}}</td>
                                                    <td>{{$ledger->type}}</td>
                                                    <td>{{$ledger->amount}}</td>
                                                    <td>{{$ledger->mop}}</td>
                                                    <td>{{$ledger->note}}</td>
                                                    <td>
                                                        {{-- <a href="{{route('admin.sale.payment.invoice' ,[$sale ,$ledger])}}" class="btn btn-xs btn-info">
                                                            <i class="fas fa-receipt"></i> Invoice
                                                        </a> --}}
                                                        <button type="button" data-target="#modal-edit{{$ledger->id}}"
                                                            data-toggle="modal" class="btn btn-xs btn-secondary">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                        <div id="modal-edit{{$ledger->id}}" class="modal fade" role="dialog">
                                                            <div class="modal-dialog modal-md">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h4 class="modal-title">Update Payment</h4>
                                                                        <button type="button" class="close"
                                                                            data-dismiss="modal">&times;</button>
                                                                    </div>
                                                                    <form action="{{route('admin.sale.payment.update' ,[$sale ,$ledger])}}" method="POST" enctype="multipart/form-data">
                                                                        @csrf
                                                                        <div class="modal-body">
                                                                            <div class="form-group">
                                                                                <label for="type">Payment type</label>
                                                                                <select id="type" name="type" class="form-control"
                                                                                        data-placeholder="Select Payment Type">
                                                                                    <option value="installment" {{ $ledger->type == 'installment' ? 'selected' : '' }}>Installment</option>
                                                                                    <option value="direct" {{ $ledger->type == 'direct' ? 'selected' : '' }}>Direct</option>
                                                                                </select>
                                                                                @error('type')
                                                                                <span class="text-danger text-sm pull-right">{{$errors->first('type')}}</span>
                                                                                @enderror
                                                                            </div>
                                                                        
                                                                            <div class="form-group">
                                                                                <label for="date">Date</label>
                                                                                <input type="date" id="date" name="date" class="form-control"
                                                                                        value="{{$ledger->date ,old('date')}}"
                                                                                        placeholder="Enter Date">
                                                                                @error('date')
                                                                                <span class="text-danger text-sm pull-right">{{$errors->first('date')}}</span>
                                                                                @enderror
                                                                            </div>
                                                                            <div class="form-group">
                                                                                <label for="amount">Amount</label>
                                                                                <input type="number" id="amount" name="amount" class="form-control"
                                                                                        value="{{$ledger->amount ,old('amount')}}"
                                                                                        placeholder="Enter Amount">
                                                                                @error('amount')
                                                                                <span class="text-danger text-sm pull-right">{{$errors->first('amount')}}</span>
                                                                                @enderror
                                                                            </div>
                                                                            <div class="form-group">
                                                                                <label for="mop">MOP</label>
                                                                                <input type="text" id="mop" name="mop" class="form-control"
                                                                                    value="{{$ledger->mop ,old('mop')}}"
                                                                                    placeholder="Enter MOP">
                                                                                @error('mop')
                                                                                <span class="text-danger text-sm pull-right">{{$errors->first('mop')}}</span>
                                                                                @enderror
                                                                            </div>
                                                                            <div class="form-group">
                                                                                <label for="note">Note</label>
                                                                                <input type="text" id="note" name="note" class="form-control"
                                                                                        value="{{$ledger->note ,old('note')}}"
                                                                                        placeholder="Enter Note">
                                                                                @error('note')
                                                                                <span class="text-danger text-sm pull-right">{{$errors->first('note')}}</span>
                                                                                @enderror
                                                                            </div>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="submit" class="btn btn-sm btn-info">Update Record</button>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <button type="button" data-target="#modal-del{{ $ledger->id }}"
                                                            data-toggle="modal" class="btn btn-xs btn-danger">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                        
                                                        <div id="modal-del{{ $ledger->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 Payment</h4>
                                                                        <button type="button" class="close"
                                                                            data-dismiss="modal">&times;</button>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        <p>Do you really wish to delete this Payment? This will delete permanently !</p>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <form action="{{route('admin.sale.payment.delete' ,[$sale ,$ledger])}}"
                                                                            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="7">No record found</td>
                                                </tr>
                                            @endforelse
                                            <tr>
                                                <th colspan="4">Remaining</th>
                                                <th>{{$sale->remaining ?? ''}}</th>
                                                <td colspan="2"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection