@extends('dashboard::layouts.app')

@section('title')
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
        Puja
    </h5>
@endsection

@section('content')
    <!--begin::Card-->
    <div class="card card-custom gutter-b example example-compact card-collapsed" data-card="true" id="kt_card_4">
        <div class="card-header">
            <h3 class="card-title">
                Add New Puja
            </h3>
            <div class="card-toolbar">
                <a href="#" class="btn btn-icon btn-sm btn-light-primary mr-1" data-card-tool="toggle">
                    <i class="ki ki-arrow-down icon-nm"></i>
                </a>
            </div>
        </div>

        <form class="form" action="" method="POST" enctype="multipart/form-data">

            <div class="card-body">
                <div class="row form-group">

                    <label class="col-lg-3 col-form-label text-right"> Puja Name :</label>
                    <div class="col-lg-3">
                        <input type="email" name="name" class="form-control mb-2" placeholder="Enter product name here" value="" required />

                    </div>

                    <label class="col-lg-2 col-form-label text-right"> Puja Image :</label>
                    <div class="col-lg-3">
                        <input type="file" class="form-control mb-2 custom-file-input" id="customFile" />
                        <label class="custom-file-label" for="customFile">Choose file</label>

                    </div>

                </div>

                <div class="row form-group">

                    <label class="col-lg-3 col-form-label text-right"> Puja Price :</label>
                    <div class="col-lg-3">
                        <input type="email" name="name" class="form-control mb-2" placeholder="Enter puja name here" value="" required />

                    </div>

                    <label class="col-lg-2 col-form-label text-right"> Puja Status :</label>
                    <div class="col-lg-3">
                        <div class="pt-3 mb-2 radio-inline">
                            <label class="radio radio-success">
                                <input type="radio" name="radios5" />
                                <span></span>
                                Active
                            </label>
                            <label class="radio radio-success">
                                <input type="radio" name="radios5" checked="checked" />
                                <span></span>
                                Inactive
                            </label>
                        </div>

                    </div>

                </div>


                <div class="row form-group">

                    <label class="col-lg-3 col-form-label text-right"> Puja Description :</label>
                    <div class="col-lg-8">
                        <textarea class="form-control mb-2" placeholder="Enter puja description here" id="exampleTextarea" rows="5"></textarea>

                    </div>

                </div>
            </div>


            <div class="card-footer">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <button type="submit" class="btn btn-success mr-2">Add Product</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!--end::Card-->

    <!--begin::Card-->
    <div class="card card-custom gutter-b">
        <div class="card-header flex-wrap py-3">
            <div class="card-title">
                <h3 class="card-label">
                    Puja List
                </h3>
            </div>
        </div>
        <div class="card-body">
            <!--begin: Datatable-->
            <div class="tab-pane" id="tab_1_1">
                <div class="portlet-body">
                    <div class="text-right">
                        <form action="" method="GET">
                            <input type="text" name="search" required />
                            <button type="submit">Search</button>
                        </form>
                    </div>
                    <table class="table zero-configuration ordertable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Puja Name</th>
                                <th>Puja Price</th>
                                <th>Puja Staus</th>
                                <th>Actions</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Lorem ipsum</td>
                                <td>Rs. 100/-</td>
                                <td><span class="label label-md label-danger label-pill label-inline mr-2">Inactive</span></td>
                                <td>

                                    <span style="display: inline-block;">
                                        <a href="" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="View"><i class="la la-eye"></i></a>
                                    </span>
                                    <span style="display: inline-block;">
                                        <a href="" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Edit"><i class="la la-edit"></i></a>
                                    </span>

                                    <span style="display: inline-block;">
                                        <form action="" method="POST">
                                            <input type="hidden" name="id" value="">
                                            <button class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Delete" onClick="return confirm('Are you sure want to delete this puja ?')"><i class="la la-trash"></i></button>
                                        </form>
                                    </span>
                                </td>
                            </tr>

                        </tbody>

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

            <!--end: Datatable-->
        </div>
    </div>
    <!--end::Card-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@endsection