@extends('Admin.layout')

@section('content')
<div class="row align-items-center justify-content-between mb-3">
    <!-- Heading -->
    <div class="col-auto">
        <h5> <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="Custom_product_table"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a></button>Custom Product</h5>
    </div>

    <!-- Button -->
    <div class="col-auto">
        <a href="Custom_product_table"> <button class="btn buttons-collection btn-primary" type="button"
                aria-haspopup="dialog" aria-expanded="false">
                <span class="d-flex align-items-center gap-2">
                    <span class="d-sm-inline-block">View Table</span>
                </span>
            </button></a>
    </div>
</div>
<div class="card p-5">

    <div class="form-section">
        <h5>Custom Product</h5>
        <form id="customProductForm" method="POST" action="{{ route('custom_product_form') }}" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="product_name"> Product Name</label>
                    <input type="text" class="form-control" id="product_name" name="product_name"
                        value="{{ old('product_name') }}" placeholder="Enter Product Name">
                    @error('product_name') <div class="text-danger">{{ $message }}</div> @enderror

                </div>
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="image">Image</label>
                    <input type="file" class="form-control" id="image" name="image">
                    @error('image') <div class="text-danger">{{ $message }}</div> @enderror
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="per_sq_rate"> Per sq Rate</label>
                    <input type="text" class=" form-control" id="per_sq_rate" name="per_sq_rate" value="{{ old('per_sq_rate') }}" placeholder="0.00">
                    @error('per_sq_rate') <div class="text-danger">{{ $message }}</div> @enderror

                </div>


                <div class="col-lg-6 mb-3">
                    <label class="form-label" for="material">Enter Material</label>
                    <select class="form-control" id="material" name="material">
                        <option value="">-- Select Material --</option>
                        @foreach($materials as $material)
                        <option value="{{ $material->material }}" >
                            {{ $material->material }}
                        </option>
                        @endforeach
                    </select>
                    @error('material') <div class="text-danger">{{ $message }}</div> @enderror
                </div>


            </div>


            <div class="form-actions d-flex justify-content-center mt-4">
                <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal"
                    data-bs-target="#product_submit">Submit</button>
                <button type="reset" class="btn btn-label-secondary">Discard</button>
            </div>
        </form>
    </div>

</div>


<!-- //  submit modal -->

<div class="modal fade" id="product_submit" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit ?</p>
            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="submit" id="submit_btn" class="btn btn-primary p-3 fw-semibold ">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<script>
    document.getElementById('submit_btn').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('customProductForm').submit();
    });
</script>
@endsection