@extends('layouts.app')

@section('content')

<div class="page-wrapper">
<div class="page-content">

<div class="container-fluid px-4">

<div class="d-flex justify-content-between mb-3">

    <h4>Purchase Bill List</h4>

    <!-- ADD BUTTON -->
    <button class="btn btn-primary"
            data-bs-toggle="modal"
            data-bs-target="#addModal">

        Add Purchase Bill
    </button>

</div>
      <div class="card shadow-sm">
                <div class="card-body">

                    <div class="table-responsive">
<table class="table table-bordered">

<thead>
<tr>
    <th>ID</th>
    <th>Date</th>
    <th>Vendor</th>
    <th>Image</th>
    <th>Action</th>
</tr>
</thead>

<tbody>

@foreach($bills as $bill)

<tr>

    <td>{{ $bill->id }}</td>

    <td>{{ $bill->bill_date }}</td>

    <td>
        {{ $bill->vendor->first_name ?? '' }}
        {{ $bill->vendor->last_name ?? '' }}
    </td>

    <td>

        @if($bill->image)

        <img src="{{ asset('uploads/purchase_bill/'.$bill->image) }}"
             width="60">

        @endif

    </td>

    <td>

        <!-- EDIT BUTTON -->
        <button class="btn btn-sm btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#editModal{{ $bill->id }}">

            Edit
        </button>

        <!-- DELETE -->
        <form action="{{ route('purchase-bill.destroy', $bill->id) }}"
              method="POST"
              style="display:inline-block">

            @csrf
            @method('DELETE')

            <button class="btn btn-sm btn-danger"
                    onclick="return confirm('Are you sure?')">

                Delete
            </button>

        </form>

    </td>

</tr>

  </div>

    </div>
</div>



<!-- EDIT MODAL -->
<div class="modal fade"
     id="editModal{{ $bill->id }}"
     tabindex="-1">

<div class="modal-dialog">

<div class="modal-content">

<form action="{{ route('purchase-bill.update', $bill->id) }}"
      method="POST"
      enctype="multipart/form-data">

@csrf
@method('PUT')

<div class="modal-header">

    <h5 class="modal-title">
        Edit Purchase Bill
    </h5>

    <button type="button"
            class="btn-close"
            data-bs-dismiss="modal"></button>

</div>

<div class="modal-body">

    <div class="mb-3">

        <label>Date</label>

        <input type="date"
               name="bill_date"
               class="form-control"
               value="{{ $bill->bill_date }}">
    </div>

    <div class="mb-3">

        <label>Vendor</label>

        <select name="vendor_id"
                class="form-control">

            <option value="">Select Vendor</option>

            @foreach($vendors as $vendor)

            <option value="{{ $vendor->id }}"
                {{ $bill->vendor_id == $vendor->id ? 'selected' : '' }}>

                {{ $vendor->first_name }}
                {{ $vendor->last_name }}

            </option>

            @endforeach

        </select>

    </div>

    <div class="mb-3">

        <label>Image</label>

        <input type="file"
               name="image"
               class="form-control">

        <br>

        @if($bill->image)

        <img src="{{ asset('uploads/purchase_bill/'.$bill->image) }}"
             width="80">

        @endif

    </div>

</div>

<div class="modal-footer">

    <button type="submit"
            class="btn btn-success">

        Update
    </button>

</div>

</form>

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

@endforeach

</tbody>

</table>

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





<!-- ADD MODAL -->
<div class="modal fade"
     id="addModal"
     tabindex="-1">

<div class="modal-dialog">

<div class="modal-content">

<form id="addPurchaseBillForm"
action="{{ route('purchase-bill.store') }}"
      method="POST"
      enctype="multipart/form-data">

@csrf

<div class="modal-header">

    <h5 class="modal-title">
        Add Purchase Bill
    </h5>

    <button type="button"
            class="btn-close"
            data-bs-dismiss="modal"></button>

</div>

<div class="modal-body">

    <div class="mb-3">

        <label>Date</label>

        <input type="date"
               name="bill_date"
               class="form-control"
               value="{{ date('Y-m-d') }}">
    </div>

    <div class="mb-3">

        <label>Vendor</label>

        <select name="vendor_id"
                class="form-control">

            <option value="">Select Vendor</option>

            @foreach($vendors as $vendor)

            <option value="{{ $vendor->id }}">

                {{ $vendor->first_name }}
                {{ $vendor->last_name }}

            </option>

            @endforeach

        </select>

    </div>

    <div class="mb-3">

        <label>Image</label>

        <input type="file"
               name="image"
               class="form-control">

    </div>

</div>

<div class="modal-footer">

    <button type="submit"
        class="btn btn-success"
        id="addSubmitBtn">

    Submit
</button>

</div>

</form>

</div>
</div>
</div>
@section('js')

<script>
$(document).on('submit', '#addPurchaseBillForm', function () {

    $('#addSubmitBtn')
        .html('<span class="spinner-border spinner-border-sm"></span> Submitting...')
        .prop('disabled', true);

});
</script>

@endsection