<?php
require '../../connect.php';

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
    /* Style for the card */
    .card {
        border: 1px solid #dee2e6; /* Add border */
        border-radius: .25rem; /* Add border radius */
        margin: 20px auto; /* Center the card horizontally */
        max-width: 800px; /* Limit maximum width */
    }

    /* Style for the card header */
    .card-header {
        background-color: deepPink; /* Pink background color */
        color: white; /* White text color */
        padding: 10px; /* Add some padding */
        display: flex; /* Use flexbox for layout */
        justify-content: space-between; /* Space items evenly */
        align-items: center; /* Center items vertically */
		
    }

    /* Style for the back button */
    .btn-back {
        color: white; /* White text color */
        background-color: black; /* Black background color */
        padding: 5px 10px; /* Add padding */
        border: none; /* Remove border */
        cursor: pointer; /* Show pointer cursor */
        text-decoration: none; /* Remove default underline */
    }

    /* Style for the h3 inside card header */
    .card-header h3 {
        font-size: 24px; /* Set font size */
        margin: 0; /* Remove default margin */
    }

    /* Style for the form */
    .form-horizontal {
        margin-top: 20px; /* Add some top margin */
        padding: 20px; /* Add padding */
    }
	.btn.btn-success
	{
		border: none;
    background: pink;
    border-radius: 6px;
    height: 30px;
    width: 100px;
    font-size: 18px;
	}
	.btn.btn-success:hover
	{
		 background:deepPink;
		 color:white;
	}
	
	.backbtn
	{
		 color: white; /* White text color */
        background-color: gray; /* Gray background color */
        padding: 5px 10px; /* Add padding */
        border: none; /* Remove border */
        cursor: pointer; /* Show pointer cursor */
        text-decoration: none; /* Remove default underline */
	}
	.backbtn:hover {
        background-color: black; /* Black hover background color */
    }
</style>

</head>
<body><br><br>
    <div class="card card-pink">
        <div class="card-header">
            <h3 class="card-title"><font size="5"><b>Add Music Director</b></font></h3>
			<div class="backbtn">
            <a onclick="return back()" style="float: right;color:white" data-toggle="modal" class="btn btn-dark"><b>Back</b></a>
			</div>
        </div>
        <form class="form-horizontal" method="POST" enctype="multipart/form-data">
            <div class="card-body">
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="music_director_name" name="music_director_name" placeholder="Type Music Director Name" style="width:100%;">
                    <br>
                    <select id="status" name="status" class="form-control"  style="width:100%;height:40px;font-size:15px;">
                        <option value="nd">-- Status --</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
					
					
                </div>
				<br>
            </div>
            <div class="card-footer">
                <input type="button" class="btn btn-success" name="Save" onclick="insert_music_director()" value="Create">
            </div>
        </form>
    </div>
    <div class="footerlabeel" style="display:flex;justify-content:space-between;margin-top:600px;">
        <label class="lableoffooter" style="font-size:18px;">©&nbspAll&nbsprights&nbspreserved&nbsp@2024</label><br>
        <label class="lableoffooter" style="font-size:18px;">Developed&nbspand&nbspMaintained&nbspby&nbspBluebase&nbspSoftware&nbspServices&nbspPrivate&nbspLimited</label>
    </div>
    <br><br>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function back() {
            var rightcontent = $("#rightcontent").hide();
            $.ajax({
                type: "POST",
                url: "/rythm/professional_singer/music_directors/showdirectors.php",
                success: function (data) {
                    $("#centerconteid").css("marginLeft", "450px");
                    $("#centerconteid").html(data);
                }
            });
        }
        function insert_music_director() {
            var id = 0;
            var data = $('form').serialize();
            $.ajax({
                type: 'GET',
                data: "id=" + id + "&" + data,
                url: '/rythm/professional_singer/music_directors/music_director_submit.php',
                success: function (data) {
                    alert("Music Director Record Entry Successfully Submitted");
                    window.location.href = "/rythm/homee.php";
                }
            });
        }
    </script>
</body>
</html>
