@extends('admin.layouts')
@section('title', 'GSTR-1 (Sales)')
@section('header')
    <link rel="stylesheet" href="{{ asset('/assets/css/datatable/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/assets/css/datatable/responsive.bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/assets/css/datatable/buttons.dataTables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/assets/css/formILY.css') }}">
@endsection
@section('content')
  <div class="container-fluid page-wrapper category-container">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5">
            <div class="card shadow-sm mb-4">
                <div class="card-header">
            <h3 class="mb-4 text-center">Create parties</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('purchase_store_post') }}" method="POST">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="customerName" class="form-label">Customer Name</label>
                                <input type="text" class="form-control" id="customerName" name="customer_name"
                                    placeholder="Enter name">
                            </div>
                             <div class="col-md-6">
                                <label for="customerName" class="form-label">Agency Name</label>
                                <input type="text" class="form-control" id="customerName" name="agency_name"
                                    placeholder="Enter name">
                            </div>
                            <div class="col-md-6">
                                <label for="phoneNumber" class="form-label">Phone Number</label>
                                <input type="text" class="form-control" id="phoneNumber" name="phone_number"
                                    placeholder="Enter phone">
                            </div>
                            <div class="col-md-6">
                                <label for="address" class="form-label">Address</label>
                                <textarea class="form-control" id="address" name="address" rows="1" placeholder="Enter address"></textarea>
                            </div>
                            <div class="col-md-6">
                                <label for="gstin" class="form-label">GSTIN</label>
                                <input type="text" class="form-control" id="gstin" name="gstin"
                                    placeholder="Enter GSTIN">
                            </div>
                            <div class="mt-4 text-end">
                                <button type="submit" class="btn btn-primary">Create Purchase</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">Parties List</h5>
                </div>
                <div class="card-body table-responsive">
                  <table id="data-table" class="table nowrap align-middle" style="width:100%">
                        <thead class="table-dark">
                            <tr>
                                <th>#</th>
                                <th>Customer Name</th>
                                 <th>Agency Name</th>
                                <th>Phone Number</th>
                                <th>Address</th>
                                <th>GSTIN</th>
                                <th>Created At</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($purchases as $key => $purchase)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>{{ $purchase->customer_name }}</td>
                                     <td>{{ $purchase->agency_name }}</td>
                                    <td>{{ $purchase->phone_number }}</td>
                                    <td>{{ $purchase->address }}</td>
                                    <td>{{ $purchase->gstin }}</td>
                                    <td>{{ $purchase->created_at->format('d-m-Y H:i') }}</td>
                                    <td>
                                        <a href="{{ route('edit_purchase', $purchase->id) }}"
                                            class="btn btn-sm btn-primary">
                                            Edit
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center">No purchases found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('footer')
    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- Datatable JS -->
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/datatables.init.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jszip.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js"></script>
@endsection